这是我参与更文挑战的第26天，活动详情查看：更文挑战
鼠标事件
鼠标事件是Web开发中最常用的一类事件。DOM3 级事件中定义了 9 个鼠标事件，简介如下。
click: 用户左键单机鼠标按钮或者回车键触发。这一点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。dblclick: 在用户双击鼠标时触发。mousedown: 用户按下任意鼠标按钮时触发。不能通过键盘触发。mouseenter: 在鼠标光标从外部元素首次移动到元素范围之内时触发。这个事件不冒泡，且移动到后代元素上也不会触发。mouseleave: 在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，且移动到后代元素上也不会触发。mousemove: 当鼠标指针在元素内部移动时重复触发。不能通过键盘触发。mouseout: 在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。移入的元素可以是之前元素的外部元素，也可以是之前元素的子元素。不能通过键盘触发。mouseover: 在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发。mouseup: 用户释放鼠标时触发。不能通过键盘触发。
只有在同一个元素上相继触发 mousedown 和 mouseup 事件，才会触发 click 事件；如果任意其一被取消都不会触发 click 事件。类似的，只有触发两次 click 事件，才会触发一次 dblclick 事件。触发顺序如下：
- mousedown
- mouseup
- click
- mousedown
- mouseup
- click
- dblclick
鼠标事件中还有一类滚轮事件—— mousewheel 事件。这个事件跟踪鼠标滚轮，现在的触控板也能触发该事件。
1. 客户区坐标位置
鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置信息保存在 clietX 和 clientY 这两个属性中。他们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。可以使用类似下列代码取得鼠标事件的客户端坐标信息：
const div = document.getElementById('myDiv');
EventUtil.addHandler(div, 'click', (e) => {
e = EventUtil.getEvent(e);
alert(`client coordinates: ${e.clientX}, ${e.clientY}`);
});
这个位置仅代表在视口的位置，并不包括滚动的距离，所以并不代表鼠标在页面上的位置。
引用
[1] javaScript高级程序设计
