JavaScript 编程精解 中文第三版 十五、处理事件
十五、处理事件
原文：Handling Events
译者：飞龙
协议：CC BY-NC-SA 4.0
自豪地采用谷歌翻译
部分参考了《JavaScript 编程精解（第 2 版）》
你对你的大脑拥有控制权，而不是外部事件。认识到这一点，你就找到了力量。
马可·奥勒留，《沉思录》
有些程序处理用户的直接输入，比如鼠标和键盘动作。这种输入方式不是组织整齐的数据结构 - 它是一次一个地，实时地出现的，并且期望程序在发生时作出响应。
事件处理器
想象一下，有一个接口，若想知道键盘上是否有一个键是否被按下，唯一的方法是读取那个按键的当前状态。为了能够响应按键动作，你需要不断读取键盘状态，以在按键被释放之前捕捉到按下状态。这种方法在执行时间密集计算时非常危险，因为你可能错过按键事件。
一些原始机器可以像那样处理输入。有一种更进一步的方法，硬件或操作系统发现按键时间并将其放入队列中。程序可以周期性地检查队列，等待新事件并在发现事件时进行响应。
当然，程序必须记得监视队列，并经常做这种事，因为任何时候，按键被按下和程序发现事件之间都会使得软件反应迟钝。该方法被称为轮询。大多数程序员更希望避免这种方法。
一个更好的机制是，系统在发生事件时主动通知我们的代码。浏览器实现了这种特性，支持我们将函数注册为特定事件的处理器。
<p>Click this document to activate the handler.p>
<script>
window.addEventListener("click", () => {
console.log("You knocked?");
});
script>window绑定指向浏览器提供的内置对象。 它代表包含文档的浏览器窗口。 调用它的addEventListener方法注册第二个参数，以便在第一个参数描述的事件发生时调用它。
事件与 DOM 节点
每个浏览器事件处理器被注册在上下文中。在为整个窗口注册处理器之前，我们在window对象上调用了addEventListener。 这种方法也可以在 DOM 元素和一些其他类型的对象上找到。 仅当事件发生在其注册对象的上下文中时，才调用事件监听器。
<button>Click mebutton>
<p>No handler here.p>
<script>
let button = document.querySelector("button");
button.addEventListener("click", () => {
console.log("Button clicked.");
});
script>示例代码中将处理器附加到按钮节点上。因此，点击按钮时会触发并执行处理器，而点击文档的其他部分则没有反应。
向节点提供onclick属性也有类似效果。这适用于大多数类型的事件 - 您可以为属性附加处理器，属性名称为前面带有on的事件名称。
但是一个节点只能有一个onclick属性，所以你只能用这种方式为每个节点注册一个处理器。 addEventListener方法允许您添加任意数量的处理器，因此即使元素上已经存在另一个处理器，添加处理器也是安全的。
removeEventListener方法将删除一个处理器，使用类似于addEventListener的参数调用。
<button>Act-once buttonbutton>
<script>
let button = document.querySelector("button");
function once() {
console.log("Done.");
button.removeEventListener("click", once);
}
button.addEventListener("click", once);
script>赋予removeEventListener的函数必须是赋予addEventListener的完全相同的函数值。 因此，要注销一个处理其，您需要为该函数提供一个名称（在本例中为once），以便能够将相同的函数值传递给这两个方法。
事件对象
虽然目前为止我们忽略了它，事件处理器函数作为对象传递：事件（Event）对象。这个对象持有事件的额外信息。例如，如果我们想知道哪个鼠标按键被按下，我们可以查看事件对象的which属性。
<button>Click me any way you wantbutton>
<script>
let button = document.querySelector("button");
button.addEventListener("mousedown", event => {
if (event.button == 0) {
console.log("Left button");
} else if (event.button == 1) {
console.log("Middle button");
} else if (event.button == 2) {
console.log("Right button");
}
});
script>存储在各种类型事件对象中的信息是有差别的。随后本章将会讨论许多类型的事件。对象的type属性一般持有一个字符串，表示事件（例如"click"和"mousedown"）。
传播
对于大多数事件类型，在具有子节点的节点上注册的处理器，也将接收发生在子节点中的事件。若点击一个段落中的按钮，段落的事件处理器也会收到点击事件。
但若段落和按钮都有事件处理器，则先执行最特殊的事件处理器（按钮的事件处理器）。也就是说事件向外传播，从触发事件的节点到其父节点，最后直到文档根节点。最后，当某个特定节点上注册的所有事件处理器按其顺序全部执行完毕后，窗口对象的事件处理器才有机会响应事件。
事件处理器任何时候都可以调用事件对象的stopPropagation方法，阻止事件进一步传播。该方法有时很实用，例如，你将一个按钮放在另一个可点击元素中，但你不希望点击该按钮会激活外部元素的点击行为。
下面的示例代码将mousedown处理器注册到按钮和其外部的段落节点上。在按钮上点击鼠标右键，按钮的处理器会调用stopPropagation，调度段落上的事件处理器执行。当点击鼠标其他键时，两个处理器都会执行。
<p>A paragraph with a <button>buttonbutton>.p>
<script>
let para = document.querySelector("p");
let button = document.querySelector("button");
para.addEventListener("mousedown", () => {
console.log("Handler for paragraph.");
});
button.addEventListener("mousedown", event => {
console.log("Handler for button.");
if (event.button == 2) event.stopPropagation();
});
script>大多数事件对象都有target属性，指的是事件来源节点。你可以根据该属性防止无意中处理了传播自其他节点的事件。
我们也可以使用target属性来创建出特定类型事件的处理网络。例如，如果一个节点中包含了很长的按钮列表，比较方便的处理方式是在外部节点上注册一个点击事件处理器，并根据事件的target属性来区分用户按下了哪个按钮，而不是为每个按钮都注册独立的事件处理器。
<button>Abutton>
<button>Bbutton>
<button>Cbutton>
<script>
document.body.addEventListener("click", event => {
if (event.target.nodeName == "BUTTON") {
console.log("Clicked", event.target.textContent);
}
});
script>默认动作
大多数事件都有与其关联的默认动作。若点击链接，就会跳转到链接目标。若点击向下的箭头，浏览器会向下翻页。若右击鼠标，可以得到一个上下文菜单等。
对于大多数类型的事件，JavaScript 事件处理器会在默认行为发生之前调用。若事件处理器不希望执行默认行为（通常是因为已经处理了该事件），会调用preventDefault事件对象的方法。
你可以实现你自己的键盘快捷键或交互式菜单。你也可以干扰用户期望的行为。例如，这里实现一个无法跳转的链接。
<a href="https://developer.mozilla.org/">MDNa>
<script>
let link = document.querySelector("a");
link.addEventListener("click", event => {
console.log("Nope.");
event.preventDefault();
});
script>除非你有非常充足的理由，否则不要这样做。当预期的行为被打破时，使用你的页面的人会感到不快。
在有些浏览器中，你完全无法拦截某些事件。比如在 Chrome 中，关闭键盘快捷键（CTRL-W或COMMAND-W）无法由 JavaScript 处理。
按键事件
当按下键盘上的按键时，浏览器会触发"keydown"事件。当松开按键时，会触发"keyup"事件。
<p>This page turns violet when you hold the V key.p>
<script>
window.addEventListener("keydown", event => {
if (event.key == "v") {
document.body.style.background = "violet";
}
});
window.addEventListener("keyup", event => {
if (event.key == "v") {
document.body.style.background = "";
}
});
script>尽管从keydown这个事件名上看应该是物理按键按下时触发，但当持续按下某个按键时，会循环触发该事件。有时，你想谨慎对待它。例如，如果您在按下某个按键时向 DOM 添加按钮，并且在释放按键时再次将其删除，则可能会在按住某个按键的时间过长时，意外添加数百个按钮。
该示例查看了事件对象的key属性，来查看事件关于哪个键。 该属性包含一个字符串，对于大多数键，它对应于按下该键时将键入的内容。 对于像Enter这样的特殊键，它包含一个用于命名键的字符串（在本例中为"Enter"）。 如果你按住一个键的同时按住Shift键，这也可能影响键的名称 - "v"变为"V"，"1"可能变成"!"，这是按下Shift-1键 在键盘上产生的东西。
诸如shift、ctrl、alt和meta（Mac 上的command）之类的修饰按键会像普通按键一样产生事件。但在查找组合键时，你也可以查看键盘和鼠标事件的shiftKey、ctrlKey、altKey和metaKey属性来判断这些键是否被按下。
<p>Press Ctrl-Space to continue.p>
<script>
window.addEventListener("keydown", event => {
if (event.key == " " && event.ctrlKey) {
console.log("Continuing!");
}
});
script>按键事件发生的 DOM 节点取决于按下按键时具有焦点的元素。 大多数节点不能拥有焦点，除非你给他们一个tabindex属性，但像链接，按钮和表单字段可以。 我们将在第 18 章中回顾表单字段。 当没有特别的焦点时，document.body充当按键事件的目标节点。
当用户键入文本时，使用按键事件来确定正在键入的内容是有问题的。 某些平台，尤其是 Android 手机上的虚拟键盘，不会触发按键事件。 但即使你有一个老式键盘，某些类型的文本输入也不能直接匹配按键，例如其脚本不适合键盘的人所使用的 IME（“输入法编辑器”）软件 ，其中组合多个热键来创建字符。
要注意什么时候输入了内容，每当用户更改其内容时，可以键入的元素（例如和