JavaScript 常见鼠标事件

JavaScript 中常见的鼠标事件：

（1）鼠标按下事件(mousedown)：鼠标按钮被按下时触发。

示例：

鼠标按下，背景颜色变为蓝色：

（2）鼠标抬起事件(mouseup)：鼠标按钮抬起时触发。

示例：

 

鼠标抬起，背景颜色变为橘色：

（3）鼠标单击事件(click)：鼠标单击时触发。

示例：

单击鼠标，宽度变为150px：

（4）鼠标双击事件(dblclick)：鼠标双击时触发。

示例：

双击鼠标，控制台输出：

（5）鼠标移动事件(mousemove)：鼠标移动时触发。

示例：

鼠标在元素上移动时，控制台会不断输出：

（6）鼠标悬停事件(mouseover)： 鼠标移到元素上方时触发。

示例：

 

鼠标位于元素上方时，背景颜色变为灰色：

（7）鼠标移出事件(mouseout)：鼠标从某元素移开时触发。

示例：

 

鼠标移开时，元素的高度会变为150px：

（8）鼠标进入事件(mouseenter)：鼠标指针移动到元素上时触发。

示例：

鼠标进入时，控制台输出：

（9）鼠标移开事件(mouseleave)：鼠标指针移出元素时触发。

示例：

鼠标从元素上移开时，控制台输出：