JavaScript鼠标和鼠标滚轮事件

JavaScript鼠标事件

在JavaScript中，定义了9个鼠标相关的事件。如下表所示:

事件名称	触发条件	是否冒泡
click	单击主鼠标左键或者按下回车键触发	冒泡
dblclick	双击单击主鼠标左键触发	冒泡
mousedown	按下鼠标按钮触发	冒泡
mouseup	释放鼠标按钮触发	冒泡
mouseenter	元素获得光标时触发（子元素从父元素获得光标，子元素会触发并捕获该事件，光标由子元素移动到父元素不触发该事件)	不冒泡
mouseleave	元素丢失光标时触发（父元素从子元素获得光标，子元素会触发并捕获该事件，光标由父元素移动到子元素不触发该事件)	不冒泡
mouseover	元素获得光标时触发	冒泡
mouseout	元素丢失光标时触发	冒泡
mousemove	光标在元素上移动时触发	冒泡

鼠标事件属性

1. 鼠标位置
   可以通过鼠标事件相应的属性获取鼠标事件发生时的鼠标位置：

位置	对应属性
相对于浏览器视口的坐标	通过clientX和clientY相对于视口的横纵坐标
相对于网页页面的坐标	通过pageX和pageY相对于视口的横纵坐标
相对于设备屏幕的坐标	通过screenX和screenY相对于视口的横纵坐标

2. 修改键
   在鼠标执行动作时，相关的其它键盘按键可能会影响最终的鼠标事件的行为，Javascript为鼠标事件对象提供了检测如下键盘按键的属性:shiftKey、ctrlKey、altKey以及metaKey(windows home键)。这些属性为true，表示对应按键按下，否则为false.

属性	值
shiftKey	true:按下，false：未按下
ctrlKey	true:按下，false：未按下
altKey	true:按下，false：未按下
metaKey	true:按下，false：未按下

3.相关元素
在mouseout事件中，相关元素relatedTarget表示获得光标的元素引用;而在mouseover事件中,相关元素relatedTarget表示失去光标的元素引用。

JavaScript鼠标滚轮事件

鼠标滚轮事件在用鼠标滚轮向上或向下浏览页面时会触发，该事件冒泡，故可以window或者document对象上捕获该事件。该事件对象除具备鼠标事件所具有的属性之外（位置信息，修改键），还具有用于表示滚轮滚动方向的属性wheelDelta,以Microsoft Edge浏览器为例，向上浏览页面时，该属性为120,而向下浏览页面时，该属性为-120。