共计 3328 个字符，预计需要花费 9 分钟才能阅读完成。
本文首发于公众号：符合预期的 CoyPan
web 中的事件
事件并不是 JavaScript 的核心部分，他们是在浏览器的 Web Api 中定义的。下面列举的几种情况，都属于发生了事件。
用户在某个元素上点击鼠标或悬停光标。
用户在键盘中按下某个按键。
用户调整浏览器的大小或者关闭浏览器窗口。
一个网页停止加载。
提交表单。
播放、暂停、关闭视频。
发生错误。
我们可以在代码中使用事件处理器来处理各种事件。
事件模型
假设我们有这么一段 html 代码：
<html>
<body>
<table>
<tbody>
<tr>
<td>Shady Grove</td>
<td>Aeolain</td>
</tr>
<tr>
<td>Over the River, Charile</td>
<td>Dorian</td>
</tr>
</tbody>
</table>
</body>
</html>
如果我们点击 over the Rive, Charile，整个事件流程如下：
事件会经历三个阶段，上图中分别由红色、蓝色、绿色标出。第一阶段为红色，事件流从根元素一直走到点击的目标元素，这个过程称为捕获。第二阶段为蓝色。这个阶段中，会处理点击事件，为事件加上各种属性等。第三阶段为绿色，事件又回重新回到根元素，这个过程称为冒泡。在整个事件流中，我们在事件流经过的任何元素上，都能监听到该事件，从而进行处理。
一般建议在冒泡阶段处理事件，这样可以最大限度的兼容各种浏览器。
注意：blur、focus、load、unload 等几个事件不会冒泡。原因是在于：这些事件仅发生于自身上，而它的任何父节点上的事件都不会产生，所有不会冒泡。
我们可以查看事件的 bubbles 属性，来判断该事件是否可以冒泡。
事件处理
EventTarget
EventTarget 是一个由可以接收事件的对象实现的接口，并且可以为它们创建侦听器。Web 中的所有事件处理器都是由 EventTarget” 提供 ” 的。
addEventListener
该方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。事件目标可以是一个文档上的元素 Element,Document 和 Window 或者任何其他支持事件的对象 (比如 XMLHttpRequest)。其标准语法如下：
target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
type: 字符串。表示事件类型，比如: click。
listener：函数。事件触发时的回调函数。这个函数会接受一个 Event 事件对象。这个 Event 事件对象中，包含了以下重要的属性和方法（这里只列举出常用的）
属性
值
bubbles
只读。一个布尔值，表示该事件是否能够在 DOM 中冒泡。
cancelBubble
通过在一个事件处理程序返回前设置这个属性的值为真，来阻止事件冒泡。
cancelable
只读。一个布尔值，用来表示这个事件是否可以取消。
currentTarget
只读。注册事件监听的对象。
target
只读。对事件起源目标的引用。
方法
作用
preventDefault
取消默认事件
stopPropagation
阻止事件冒泡
options：对象。指定一个 listener 的配置参数。
属性
值
capture
布尔值。如果为 true，表示该 listener 会在捕获过程中执行。如果为 false，listener 会在冒泡过程中执行。默认为 false。
once
布尔值。默认为 false。如果为 true，listener 只会执行一次，并且执行后会被自动移除。
passive
布尔值。如果为 true，则无法调用 preventDefault 来阻止默认事件。默认为 false。这个属性有一个需要注意的地方。在 safari 浏览器的页面滚动事件中，这个值是默认的 true。所以要阻止 safari 中的页面滚动，需要手动将这个值设为 false。
useCapture：布尔值，可选。默认为 false，事件在冒泡过程中触发 listener。
removeEventListener
删除使用 addEventListener 注册到 target 上的事件。标准语法：
target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);
为了提高页面性能，我们在处理完某事件，并且不用继续监听该事件时，可以将之前注册的事件监听函数移除。需要注意的是，如果注册事件时，在捕获或冒泡阶段均进行了监听，那么移除时需要分别移除。
currentTarget 与 target 的区别
在事件处理函数中，我们经常会使用到事件的这两个属性。currentTarget 表示注册事监听的对象。target 表示事件起源的对象。举个例子：
<div id=”father”>
<div id=”child1″>child1</div>
<div id=”child2″>child2</div>
<div id=”child3″>child3</div>
</div>
document.getElementById(‘father’).addeventListener(‘click’, function(e){
console.log(e.currentTarget);
console.log(e.target);
});
我们将事件处理函数绑定在 father 上。现在，如果我们点击的是 child1，由于 child1 是事件源，那么 e.target 就是 child1。而我们的事件处理函数是绑定在 father 上的，所以，e.currentTarget 就是 father。
这一点在开发过程中需要特别注意。
事件代理
这个概念依赖于这样一个事实, 如果你想要在大量子元素中单击任何一个都可以运行一段代码，您可以将事件监听器设置在其父节点上，并将事件监听器气泡的影响设置为每个子节点，而不是每个子节点单独设置事件监听器。举个例子：
<ul>
<li>1<li>
<li>2<li>
<li>3<li>
<li>4<li>
<li>5<li>
<li>6<li>
<li>7<li>
<li>8<li>
<li>9<li>
</ul>
我们要实现点击每一个 li 的时候，输出 li 内对应的数字，我们当然可以直接在所有的 li 上分别绑定一个事件。但是这样会造成内存的浪费。我们可以只在 ul 上绑定一个事件，根据事件的 target 来获取当前点击的 li，拿到该 li 内对应的数字。
document.querySelector(‘ul’).addEventListener(‘click’, function(e){
if(e.target && e.target.nodeName === “LI”) {
console.log(e.target.innerHTML);
}
});
自定义事件
最新的 DOM 标准允许我们自定义事件。直接看下面的例子。
var fakeNode = document.createElement(‘Coy’); // 创建一个自定义元素
var evt = document.createEvent(‘Event’); // 创建一个自定义事件
var evtType = ‘test’; // 自定义事件的类型
// 事件监听函数
fakeNode.addEventListener(evtType, function(e){
console.log(e); // e.type === ‘test’;
}, false);
// 初始化事件。
// initEvent 用法：event.initEvent(type, bubbles, cancelable);
evt.initEvent(evtType, false, false);
// 向 fakeNode 派发 evt 事件
fakeNode.dispatchEvent(evt);
写在后面
事件，是前端开发中的一个基础。虽然简单，但是十分重要。
欢迎关注我的公众号: 符合预期的 CoyPan 做一名符合预期的 FE
