## HTML 鼠标事件### 简介HTML 鼠标事件会在鼠标与网页元素交互时被触发。这些事件可以被 JavaScript 代码捕获，并用于执行特定的操作，例如改变元素样式、验证表单数据或者启动动画效果等。### 常用鼠标事件#### 点击事件

click

: 当用户在元素上点击鼠标按钮并释放时触发。

dblclick

: 当用户在元素上双击鼠标按钮时触发。

mousedown

: 当用户在元素上按下鼠标按钮时触发。

mouseup

: 当用户在元素上释放鼠标按钮时触发。#### 光标移动事件

mouseover

: 当鼠标指针移动到元素上时触发。

mouseout

: 当鼠标指针移出元素时触发。

mousemove

: 当鼠标指针在元素上移动时，重复触发。#### 其他事件

contextmenu

: 当用户在元素上右键单击，试图打开上下文菜单时触发。

wheel

: 当用户滚动鼠标滚轮时触发。### 事件对象当鼠标事件被触发时，会创建一个

event

对象，其中包含了有关该事件的详细信息。 一些常用的 event 对象属性包括:

clientX/clientY

: 鼠标指针相对于浏览器窗口可视区域的水平/垂直坐标。

pageX/pageY

: 鼠标指针相对于整个文档的水平/垂直坐标。

screenX/screenY

: 鼠标指针相对于电脑屏幕的水平/垂直坐标。

button

: 指示按下哪个鼠标按钮，例如 0 代表左键， 1 代表中键， 2 代表右键。### 使用方法可以通过以下两种方式将 JavaScript 代码绑定到 HTML 元素的鼠标事件上：

1. 在 HTML 中使用事件属性:

```html ```

2. 在 JavaScript 代码中使用事件监听器:

```html ```### 示例以下是一些简单的鼠标事件应用示例：

1. 改变元素背景颜色:

```html

```

2. 获取鼠标点击坐标:

```html

```### 总结熟练掌握 HTML 鼠标事件的使用方法可以帮助你创建更加交互式的网页体验，并为用户提供更加丰富的功能。

标签: html鼠标事件