JavaScript事件类型——鼠标与滚轮事件及鼠标事件对象

鼠标事件是 Web 开发中最常用的一类事件，毕竟鼠标还是最主要的定位设备。DOM3 级事件中定义了 9 个鼠标事件。

鼠标事件：

• click： 用户单击主鼠标按钮（一般为左键）或者按下回车键时触发。这一点对确保易访问性很重要，意味着 onclick 事件处理程序即可以通过键盘也可以通过鼠标执行。
• dblclick： 在用户双击主鼠标按钮时触发。
• mousedown： 用户按下任意鼠标按钮时触发。不能通过键盘触发。
• mouseenter： 在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。
• mouseleave： 位于元素上的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。
• mousemove： 当鼠标在元素内部移动时重复触发。不能通过键盘触发。
• mouseout： 当鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。移入的另一个元素可能位于前一个元素的内部，也可能是这个元素的子元素。不能通过键盘触发。
• mouseover： 在鼠标指针位于一个元素的外部，然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发。
• mouseup： 在用户释放鼠标按钮时触发。不能通过键盘触发。

页面上的所有元素都支持鼠标事件。除了 mouseenter 和 mouseleave ，所有的鼠标事件都会冒泡，也可以被取消，而取消鼠标事件会影响浏览器的默认行为。取消鼠标事件的默认行为还会影响其他事件，因为鼠标事件与其他事件是密不可分的。

例如，在一个元素上相继触发 mousedown 和 mouseup 事件，才会触发 click 事件；如果 mousedown 和 mouseup 事件中的一个被取消，就不会触发 click 事件。类似的还有 触发两次 click 事件才会触发 dblclick 事件。
这四个事件的触发顺序如下：

1. mousedown
2. mouseup
3. click
4. mousedown
5. mouseup
6. click
7. dblclick

要检测浏览器是否支持上面的所有事件，可以使用以下代码：

var isSupported = document.implementation.hasFeature("MouseEvent", "3.0");

---

鼠标事件的事件对象 event

坐标位置

坐标位置包括客户区坐标位置、页面坐标位置、屏幕坐标位置。
详细介绍：
https://blog.csdn.net/TalonZhang/article/details/84304786

---

修改键

虽然鼠标事件主要是使用鼠标来触发的，但在按下鼠标时键盘上的某些键的状态也可以影响所要采取的操作。
这些修改键就是：Shift、Ctrl、Alt、Meta（Window 键或 Cmd 键）。
详细介绍：
https://blog.csdn.net/TalonZhang/article/details/84305595

---

相关元素

在发生 mouseover 和 mouseout 事件时，还会涉及更多的元素。这两个事件都会涉及把鼠标指针从一个元素边界之内移动到另一个元素的边界之内。对 mouseover 而言，事件的主目标是获得光标的元素，而相关元素就是失去光标的元素。类似的，对于 mouseout 事件而言则反之。
详细介绍：
https://blog.csdn.net/TalonZhang/article/details/84339941