JS高级程序设计——第13章事件 13.4 事件类型（鼠标与滚轮事件）

一、鼠标事件类型

1. 鼠标事件是 Web 开发中最常用的一类事件，毕竟鼠标还是最主要的定位设备。DOM3 级事件中定 义了 9 个鼠标事件，简介如下。
   
   
2. 页面上的所有元素都支持鼠标事件。除了 mouseenter 和 mouseleave，所有鼠标事件都会冒泡，也可以被取消，而取消鼠标事件将会影响浏览器的默认行为。取消鼠标事件的默认行为还会影响其他事件，因为鼠标事件与其他事件是密不可分的关系。【mouseenter、mouseleave、mouseover和mouseout的区别可参考https://blog.csdn.net/sinat_36521655/article/details/80237213】
3. 只有在同一个元素上相继触发 mousedown 和 mouseup 事件，才会触发 click 事件;如果 mousedown 或 mouseup 中的一个被取消，就不会触发 click 事件。类似地，只有触发两次 click 事 件，才会触发一次 dblclick 事件。如果有代码阻止了连续两次触发 click 事件(可能是直接取消 click 事件，也可能通过取消 mousedown 或 mouseup 间接实现)，那么就不会触发 dblclick 事件了。

• 这 4 个事件触发的顺序始终如下:
  (1) mousedown
  (2) mouseup
  (3) click
  (4) mousedown
  (5) mouseup
  (6) click
  (7) dblclick
  显然，click 和 dblclick 事件都会依赖于其他先行事件的触发;而 mousedown 和 mouseup 则不受其他事件的影响。
• IE8 及之前版本中的实现有一个小 bug，因此在双击事件中，会跳过第二个 mousedown 和 click事件，其顺序如下:
  (1) mousedown
  (2) mouseup
  (3) click
  (4) mouseup
  (5) dblclick
  IE9 修复了这个 bug，之后顺序就正确了。

4. 使用以下代码可以检测浏览器是否支持以上 DOM2 级事件(除 dbclick、mouseenter 和mouseleave 之外【不是DOM2级中规定的】)：
   

• 要检测浏览器是否支持上面的所有事件，可以使用以下代码：
  
  注意，DOM3 级事件的 feature 名是"MouseEvent"，而非"MouseEvents"。

5. 鼠标事件中还有一类滚轮事件。而说是一类事件，其实就是一个 mousewheel 事件。这个事件跟踪鼠标滚轮，类似于 Mac 的触控板。

二、客户区坐标位置

1、 事件对象的 clientX 和 clientY 属性

1. 鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的 clientX 和 clientY 属性中。所有浏览器都支持这两个属性，它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。【根据以上表述我理解为浏览器视口和客户区是一个区域】图 13-4 展示了视口中客户区坐标位置的含义。
   
   可以使用类似下列代码取得鼠标事件的客户端坐标信息：
   
   这里为一个<div>元素指定了 onclick 事件处理程序。当用户单击这个元素时，就会看到事件的客户端坐标信息【返回的是鼠标指针相对视口的位置】。注意，这些值中不包括页面滚动的距离，因此这个位置并不表示鼠标在页面上的位置【只相对于视口那个框，不想对于整个页面】。

三、页面坐标位置

1、 pageX 和 pageY 属性

1. 页面坐标通过事件对象的 pageX 和 pageY 属性，能告诉你事件是在页面中的什么位置发生的。pageX 和 pageY 属性表示鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的左边和顶边计算的【因此这两个属性包含页面滚动的距离，因为是相对页面边缘嘛，滚动并不影响】。

   以下代码可以取得鼠标事件在页面中的坐标：
   

2. pageX 和 pageY 的值与 clientX 和 clientY 的值的关系：

• 在页面没有滚动的情况下，pageX 和 pageY 的值与 clientX 和 clientY 的值相等。因为页面顶端与视口顶端重合。
• 在页面有滚动的情况下，pageX 和 pageY 的值包括页面滚动的距离， clientX 和 clientY 的值不包括。
• IE8 及更早版本不支持事件对象上的页面坐标，不过使用客户区坐标和滚动信息可以计算出来。这时候需要用到 document.body(混杂模式)或 document.documentElement(标准模式)中的 scrollLeft 和 scrollTop 属性。计算过程如下所示：
  

四、屏幕坐标位置

1、 screenX 和 screenY 属性

鼠标事件发生时，不仅会有相对于浏览器窗口的位置，还有一个相对于整个电脑屏幕的位置。而通过 screenX 和 screenY 属性就可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息。图 13-5 展示了浏览器中屏幕坐标的含义。

可以使用类似下面的代码取得鼠标事件的屏幕坐标：

这里也是为<div>元素指定了一个 onclick 事件处理程序。当这个元素被单 击时，就会显示出事件的屏幕坐标信息了。

五、修改键

1. 与鼠标配合使用的按键：虽然鼠标事件主要是使用鼠标来触发的，但在按下鼠标时键盘上的某些键的状态也可以影响到所要采取的操作。这些修改键就是 Shift、Ctrl、Alt 和 Meta(在 Windows 键盘中是 Windows 键，在苹果机中 是 Cmd 键)，它们经常被用