持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

鼠标事件类型

鼠标事件有10中类型，分为点击事件和移动事件。

1. 点击事件

mousedown - 按下鼠标键时触发
mouseup - 释放鼠标键时触发
click - 单击左键，或者获取焦点后按enter键触发
dbclick - 双击鼠标左键触发
contextmenu - 点击右键触发

点击事件的执行顺序

鼠标双击时：mousedown->mouseup->click->dbclick
鼠标右击时：mousedown->mouseup->contextmenu

2. 移动事件

mousemove - 鼠标移动时触发
mouseover - 当鼠标进入元素时触发
mouseout - 当鼠标离开元素时触发
mouseenter - 当鼠标进入元素时触发（不支持冒泡）
mouseleave - 当鼠标离开元素时触发（不支持冒泡）移动事件的执行顺序
鼠标移入时：mouseover->mouseenter->mousemove
鼠标移出时：mousemove->mouseleave->mouseout

鼠标事件对象

鼠标事件对象提供了丰富的信息，接下来按照功能介绍

1. 鼠标坐标位置属性

MouseEvent.screenX/Y 表示鼠标位置相对于屏幕左上角的水平/垂直坐标。
MouseEvent.clientX/Y表示鼠标指针在文档可视区域中的水平和垂直坐标。
MouseEvent.pageX/Y 表示鼠标位置与文档左侧/上侧边缘的距离。
MouseEvent.offsetX/Y 表示鼠标位置与目标节点左/上侧的padding边缘的水平距离。

2. 鼠标组合键属性

MouseEvent.altKey、MouseEvent.ctrlKey、MouseEvent.metaKey、MouseEvent.shiftKey这四个属性都返回一个布尔值，表示事件发生时，是否按下对应的键。它们都是只读属性。

altKey属性是alt键
ctrlKey属性是ctrl键
metaKey属性是Meta键
shiftKey属性是Shift键

function showKey(e) {
  console.log('ALT key pressed: ' + e.altKey);
  console.log('CTRL key pressed: ' + e.ctrlKey);
  console.log('META key pressed: ' + e.metaKey);
  console.log('SHIFT key pressed: ' + e.shiftKey);
}

3. 鼠标按键属性

MouseEvent.button属性表示那个鼠标按键被触发。对于click、dbclick、contextmenu事件，我们能够确切的知道按下的是左键或右键。但是对于mousedown和mouseup事件，需要通过button属性来知道具体的按键。

mouseEvent.button == 0 左键
mouseEvent.button == 1 中键
mouseEvent.button == 2 右键另外还有一个event.buttons属性，返回一个三个比特位的值，表示同时按下了那些键，用于处理按下多个鼠标键的情况。
001 表示按下左键
010 表示按下右键
100 表示按下中键或滚动键

    document.querySelector('div').onmousedown = function showKey(e) {
        console.log(e.button)
        console.log(e.buttons)
    }

4. 相关节点属性

MouseEvent.relatedTarget属性返回事件的相关节点。没有相关节点的事件，该属性返回null

事件名称	target 属性	relatedTarget 属性
mouseenter	将要进入的节点	将要离开的节点
mouseout	将要离开的节点	将要进入的节点
mouseleave	将要离开的节点	将要进入的节点
mouseover	将要进入的节点	将要离开的节点

深入理解鼠标事件