所有的鼠标事件的对象都包含有关按下的组合键的信息，如果在事件期间按下了相应的键，则相应的属性的值为 true。

• 事件属性 event.shiftKey 表示是否按下 Shift 键，true 为按下该键
• 事件属性 event.altKey 表示是否按下 Alt（或对于 Mac 是 Opt），true 为按下该键
• 事件属性 event.ctrlKey 表示是否按下 Ctrl，true 为按下该键
• 事件属性 event.metaKey 表示是否按下（对于 Mac）Cmd 键，true 为按下该键

<button id="button">Alt+Shift+Click on me!</button>
<script>
  button.onclick = function(event) {
    // 如果同时按下 Alt 和 Shift 键并点击按钮时，会弹出提示信息 Hooray！
    if (event.altKey && event.shiftKey) {
      alert('Hooray!');
    }
  };
</script>

对于所有的鼠标事件有两种形式的坐标

• 相对于窗口的坐标 clientX 和 clientY，它们是相对于窗口计算的，类似于 position:fixed 定位规则。
• 相对于文档的坐标 pageX 和 pageY，它们是从文档的左上角而不是窗口开始计算的。

与鼠标移动的事件有很多，如 mousemove、mouseover 与 mouseout、mouseenter 与 mouseleave

事件 mousemove 当鼠标移动时就会触发 mousemove 事件。

事件 mouseover 与事件 mouseout

• 当鼠标指针移到某个元素上时会触发 mouseover 事件
• 当鼠标指针离开某个元素时会触发 mouseout 事件

事件 mouseenter 与事件 mouseleave

• 当鼠标指针进入某个元素上时会触发 mouseenter 事件
• 当鼠标指针离开某个元素时会触发 mouseleave 事件

跳过元素

如果访问者非常快地移动鼠标，mouseout 事件和 mouseover 事件可能在某些 DOM 元素就可能被跳过，即鼠标指针并不会「访问」所有元素。它可以「跳过」一些元素，则对性能很有好处。但是如果一个元素的 mouseover 事件被触发了，那么一旦鼠标离开它，就会有相应的 mouseout 事件发生。

Warning

relatedTarget 属性可以为 null，这是正常现象。因为鼠标可以不是来自另一个元素，而是来自窗口之外（而且鼠标移动很快）；或者它离开了窗口而并不指向另一个元素。当我们在代码中使用 event.relatedTarget 时，我们应该牢记这种可能性，如果我们访问 event.relatedTarget.tagName，那么就会出现错误。

移动到子元素

事件 mouseout 和 mouseover 的一个重要功能是当鼠标指针从元素移动到其后代时触发，看起来似乎是从父元素离开，但实际上只是「更深入」移入到子元素而已（通过追踪 event.target 可观察），鼠标指针依然位于父元素上。

如果我们在 #parent 上，然后将鼠标指针更深入地移入 #child，在 #parent 上会得到 mouseout！

根据浏览器的逻辑，鼠标指针随时可能位于单个元素上，即嵌套最多的那个元素（z-index 最大的那个），因此如果鼠标转到另一个元素（甚至是一个后代），那么就认为它离开前一个元素，此时前一个元素（父元素）的事件 mouseout 会被触发，后一个元素（子元素）的事件 mouseover 会被触发（请留意由于事件冒泡，如果父元素上具有 mouseover 处理程序将会被触发）。

Warning

如果（最顶部的元素）监听的事件是 mouseenter/mouseleave 则行为不同。当鼠标指针该元素时会触发事件 mouseenter；当鼠标指针离开该元素时，事件 mouseleave 才会触发。而鼠标指针在元素或其后代中的确切位置无关紧要，它在后代之间的移动会被忽略。

拖放 Drag'n'Drop 是一个很赞的用户界面交互方案，，如通过拖放实现文档/元素的移动，它是一种简单明了的交互方式。在现代 HTML 标准中有一个 关于拖放的部分，这个交互过程包含了特殊的浏览器事件，如 dragstart 和 dragend 事件。

这些关于拖放的事件很有用，因为它们使我们能够轻松地解决简单的任务，如能够处理将「外部」文件拖放到浏览器中的操作，从而使 JavaScript 可以访问其内容。但是原生的拖放事件也有其局限性，如无法将拖放限制在某个区域内，并且无法将拖放变成「水平」或「垂直」拖放。此外移动设备基本都不支持此事件。我们可以取消原生的 ondragstart 事件触发的浏览器默认行为，并借助鼠标事件 mousedown、mousemove、mouseup 实现基本的拖放算法，完成特定的拖放交互功能。

基础的拖放算法：

1. 事件流：elem.mousedown -> document.mousemove（在 document 上跟踪 mousemove 事件）-> elem.mouseup（💡 不要忘记取消原生 ondragstart 事件的浏览器默认行为）。
2. 在拖动开始时，记住鼠标指针相对于元素的初始偏移（shift） shiftX/shiftY，并在拖动过程中保持它不变。
3. 使用 document.elementFromPoint 检测鼠标指针下的 "droppable" 的元素，在「经过」mouseover 时高亮显示，以提示用户可以在此处「放下」拖拽的元素。

👉 实例演示：拖放球进球门

• 按键事件对象的属性 event.key 允许获取字符（相当于显示的字符）
• 按键事件对象的属性 event.code 则允许获取「物理按键代码」（相当于键盘按键）

• 字符键的代码为 "Key<letter>"："KeyA"，"KeyB" 等。
• 数字键的代码为 "Digit<number>"："Digit0"，"Digit1" 等。
• 特殊按键的代码为按键的名字 "Enter"，"Backspace"，"Tab" 等。

按下特殊的按键在页面上并不显示字符，其属性 event.key 与 event.code 大致相同，但属性 event.code 会提供更准确的信息，如 Shift 键大多数键盘有两个 Shift 键，一个在左边，一个在右边，属性 event.code 会区分按下是哪个 Shift 键；而 event.key 只对按键的「含义」负责，因此并不区分两个 Shift 键。

document.addEventListener('keydown', function(event) {
  if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)) {
    alert('Undo!')
  }
});

如果按下一个键足够长的时间，它就会开始「自动重复」触发 keydown 事件，直到按键被释放。因此有很多 keydown 却只有一个 keyup 是很正常的。

对于由自动重复触发的事件，其属性 event.repeat 被设置为 true。

按键有多种，对应的事件默认行为都不同，如出现在屏幕上的一个字符（最常见的结果）、一个字符被删除（Delete 键）、滚动页面（PageDown 键）、打开「保存页面」对话框（Ctrl+S）等。

按键事件 keydown 大多数的默认行为都可以阻止（使用 event.preventDefault() 或 on<event> 返回 return false），但基于 OS 的特殊按键除外，如在 Windows 中 Alt+F4 会关闭当前浏览器窗口，无法通过脚本阻止该按键组合事件的默认行为。