【JavaScript 漫游】【024】鼠标事件简记

鼠标事件的种类

鼠标事件指与鼠标相关的事件，继承了 MouseEvent 接口。具体的事件主要有以下一些。

• click：按下鼠标（通常是按下主按钮）时触发
• dblclick：在同一个元素上双击鼠标时触发
• mousedown：按下鼠标键时触发
• mouseup：释放按下的鼠标键时触发
• mousemove：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时间内只能运行一次
• mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件
• mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件
• mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件
• mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件
• contextmenu：按下鼠标右键时（上下文菜单出现前）触发，或者按下“上下文菜单键”时触发
• wheel：滚动鼠标的滚轮时触发，该事件继承的是WheelEvent接口

/* HTML 代码如下
 <ul>
   <li>item 1</li>
   <li>item 2</li>
  <li>item 3</li>
 </ul>
*/

var ul = document.querySelector('ul');

// 先进入 ul 节点，然后在节点内部移动，不会触发 mouseleave 事件
// 只有离开 ul 节点时，触发一次 mouseleave
// event.target 是 ul 节点
ul.addEventListener('mouseleave', function (event) {
  event.target.style.color = 'purple';
  setTimeout(function () {
    event.target.style.color = '';
  }, 500);
}, false);

// 先进入 ul 节点，然后在节点内部移动，mouseout 事件会触发多次
// event.target 是 li 节点
ul.addEventListener('mouseout', function (event) {
  event.target.style.color = 'orange';
  setTimeout(function () {
    event.target.style.color = '';
  }, 500);
}, false);

MouseEvent 接口概述

MouseEvent 接口代表了鼠标相关的事件，它继承了 Event 接口，所以拥有 Event 的所有属性和方法。它还有自己的属性和方法。

浏览器原生提供一个 MouseEvent 构造函数，用于新建一个 MouseEvent 实例。

var event = new MouseEvent(type, options);

第一个参数是字符串，表示事件名称；第二个参数是一个事件配置对象，该参数可选。除了 Event 接口的实例配置属性，该对象可以配置以下属性，所有属性都是可选的。

• screenX：数值，鼠标相对于屏幕的水平位置（单位像素），默认值为0，设置该属性不会移动鼠标
• screenY：数值，鼠标相对于屏幕的垂直位置（单位像素），其他与 screenX 相同
• clientX：数值，鼠标相对于程序窗口的水平位置（单位像素），默认值为0，设置该属性不会移动鼠标
• clientY：数值，鼠标相对于程序窗口的垂直位置（单位像素），其他与 clientX相同
• ctrlKey：布尔值，是否同时按下了 Ctrl 键，默认值为 false
• shiftKey：布尔值，是否同时按下了 Shift 键，默认值为 false
• altKey：布尔值，是否同时按下 Alt 键，默认值为 false
• metaKey：布尔值，是否同时按下 Meta 键，默认值为 false
• button：数值，0 代表鼠标左键，1 代表辅助键（通常是鼠标中间键），2 代表鼠标右键
• buttons：数值，0 代表没有按下任何键，1 代表鼠标左键，2 代表鼠标右键，4 代表辅助键（通常是鼠标中间键），3 代表同时按下了左键和右键
• relatedTarget：节点对象，表示事件的相关节点，默认为 null。mouseenter 和mouseover 事件时，表示鼠标刚刚离开的那个元素节点；mouseout 和mouseleave` 事件时，表示鼠标正在进入的那个元素节点

function simulateClick() {
  var event = new MouseEvent('click', {
    'bubbles': true,
    'cancelable': true
  });
  var cb = document.getElementById('checkbox');
  cb.dispatchEvent(event);
}

MouseEvent 的实例属性

• screenX：数值，鼠标相对于屏幕的水平位置（单位像素），默认值为0，设置该属性不会移动鼠标
• screenY：数值，鼠标相对于屏幕的垂直位置（单位像素），其他与 screenX 相同
• clientX：数值，鼠标相对于程序窗口的水平位置（单位像素），默认值为0，设置该属性不会移动鼠标
• clientY：数值，鼠标相对于程序窗口的垂直位置（单位像素），其他与 clientX相同
• offsetX：返回鼠标位置与目标节点左侧的 padding 边缘的水平距离（单位像素）
• offsetY：返回与目标节点上方的 padding 边缘的垂直距离。这两个属性都是只读属性
• pageX：返回鼠标位置与文档左侧边缘的距离（单位像素）
• pageY：返回与文档上侧边缘的距离（单位像素）
• ctrlKey：布尔值，是否同时按下了 Ctrl 键，默认值为 false
• shiftKey：布尔值，是否同时按下了 Shift 键，默认值为 false
• altKey：布尔值，是否同时按下 Alt 键，默认值为 false
• metaKey：布尔值，是否同时按下 Meta 键，默认值为 false
• button：数值，0 代表鼠标左键，1 代表辅助键（通常是鼠标中间键），2 代表鼠标右键
• buttons：数值，0 代表没有按下任何键，1 代表鼠标左键，2 代表鼠标右键，4 代表辅助键（通常是鼠标中间键），3 代表同时按下了左键和右键
• relatedTarget：节点对象，表示事件的相关节点，默认为 null。mouseenter 和mouseover 事件时，表示鼠标刚刚离开的那个元素节点；mouseout 和mouseleave` 事件时，表示鼠标正在进入的那个元素节点

WheelEvent 接口

WheelEvent 接口继承了 MouseEvent 实例，代表鼠标滚轮事件的实例对象。目前，鼠标滚轮相关的事件只有一个 wheel 事件，用户滚动鼠标的滚轮，就生成这个事件的实例。

浏览器原生提供 WheelEvent() 构造函数，用来生成 WheelEvent 实例。

var wheelEvent = new WheelEvent(type, options);

WheelEvent() 构造函数可以接受两个参数，第一个是字符串，表示事件类型，对于滚轮事件来说，这个值目前只能是 wheel。第二个参数是事件的配置对象。该对象的属性除了 Event、UIEvent 的配置属性以外，还可以接受以下几个属性，所有属性都是可选的。

• deltaX：数值，表示滚轮的水平滚动量，默认值是 0.0
• deltaY：数值，表示滚轮的垂直滚动量，默认值是 0.0
• deltaZ：数值，表示滚轮的 Z 轴滚动量，默认值是 0.0
• deltaMode：数值，表示相关的滚动事件的单位，适用于上面三个属性。0表示滚动单位为像素，1表示单位为行，2表示单位为页，默认为0

MouseEvent 接口的实例属性

• deltaX：数值，表示滚轮的水平滚动量，默认值是 0.0
• deltaY：数值，表示滚轮的垂直滚动量，默认值是 0.0
• deltaZ：数值，表示滚轮的 Z 轴滚动量，默认值是 0.0
• deltaMode：数值，表示相关的滚动事件的单位，适用于上面三个属性。0表示滚动单位为像素，1表示单位为行，2表示单位为页，默认为0

注意，它们都是只读属性。