Click、touch、load、drag、change、input、error、resize—这些都是冗长的DOM（文档对象模型）事件列表的一部分。事件可以在文档(Document)结构的任何部分被触发，触发者可以是用户操作，也可以是浏览器本身。事件并不是只是在一处被触发和终止；他们在整个document中流动，拥有它们自己的生命周期。而这个生命周期让DOM事件有更多的用途和可扩展性。

作为一个开发人员，我们必须要理解DOM事件是如何工作的，然后才能更好的驾驭它，利用它们潜在的优势，开发出更高交互性的参与体验（engaging experiences）。

反观我做前端开发的这么长时间里，我觉得我从来没有看到过一个关于DOM事件是如何工作的较为直接准确的解释。今天我的目标就是在这个课题上给大家一个清晰的介绍，让大家能够更快速的了解它。我首先会介绍DOM事件的基本使用方式，然后会深入挖掘事件内部的工作机制，解释我们如何使用这些机制来解决一些常见的问题。

监听事件

在过去，主流浏览器之间对于如何给DOM节点添加事件监听有着很大的不一致性。jQuery这样的前端库为我们封装和抽象了这些差异行为，为事件处理带来了极大的便利。

如今，我们正一步步走向一个标准化的浏览器时代，我们可以更加安全地使用官方规范的接口。为了简单起见，这篇文章将主要介绍在现代浏览器中如何管理事件。如果你在为IE8或者更低版本写JavaScript，我会推荐你使用polyfill或者一些框架（如jQuery）来管理事件监听。

在JavaScript中，我们使用如下的方式为元素添加事件监听：

element.addEventListener(<event-name>, <callback>, <use-capture>);

event-name(string)

这是你想监听的事件的名称或类型。它可以是任何的标准DOM事件（click, mousedown, touchstart, transitionEnd,等等），当然也可以是你自己定义的事件名称（我们会在后面介绍自定义事件相关内容）。

callback(function)（回调函数）

这个函数会在事件触发的时候被调用。相应的事件(event)对象，以及事件的数据，会被作为第一个参数传入这个函数。

use-capture(boolean)

这个参数决定了回调函数(callback)是否在“捕获(capture)”阶段被触发。不用担心，我们稍后会对此做详细的解释。

var element = document.getElementById('element');
function callback() {
    alert('Hello');
}
// Add listener
element.addEventListener('click', callback);

Demo: addEventListener

移除监听

移除不再使用的事件监听是一个最佳实践（尤其对于长时间运行的Web应用）。我们使用element.removeEventListener()方法来移除事件监听：

element.removeEventListener(<event-name>, <callback>, <use-capture>);

但是removeElementListener有一点需要注意的是：你必须要有这个被绑定的回调函数的引用。简单地调用element.removeEventListener(‘click’);是不能达到想要的效果的。

本质上来讲，如果我们考虑要移除事件监听（我们在长时间运行(long-lived)的应用中需要用到），那么我们就需要保留回调函数的句柄。意思就是说，我们不能使用匿名函数作为回调函数。

var element = document.getElementById('element');
function callback() {
    alert('Hello once');
    element.removeEventListener('click', callback);
}
// Add listener
element.addEventListener('click', callback);

维护回调函数上下文

一个很容易遇到的问题就是回调函数没有在预想的运行上下文被调用。让我们看一个简单的例子来解释一下：

var element = document.getElementById('element');
var user = {
    firstname: 'Wilson',
    greeting: function(){
    alert('My name is ' + this.firstname);
};
// Attachuser.greeting as a callback
element.addEventListener('click', user.greeting);
// alert =&gt; 'My name is undefined

使用匿名函数(Anonymous Functions)

我们希望回调函数中能够正确的输出”My name is Wilson”。事实上，结果确是”My name is undefined”。为了使得this.firstName能够返回”Wilson”，user.greeting必须在user对象的上下文环境（context）中被执行（这里的运行上下文指的是.号左边的对象）。

当我们将greeting函数传给addEventListener方法的时候，我们传递的是一个函数的引用；user相应的上下文并没有传递过去。运行的时候，这个回调函数实际上是在element的上下文中被执行了，也就是说，在运行的时候，this指向的是element，而不是user。所以this.firstName是undefined。

有两种方式可以避免这种上下文错误的问题。第一种方法，我们可以在一个匿名函数内部调用user.greeting()方法，从而获得正确的函数执行上下文(user)。

element.addEventListener('click', function() {
user.greeting();
    // alert =&gt; 'My name is Wilson'
});

使用Function.prototype.bind

上一种方式并不是非常好，因为我们不能获得回调函数的句柄以便后面通过.removeEventListener()移除事件监听。另外，这种方式也比较丑陋。。我更喜欢使用.bind()方法(做为ECMAScript 5的标准内建在所有的函数对象中）来生成一个新的函数（被绑定过的函数），这个函数会在指定的上下文中被执行。然后我们将这个被绑定过的函数作为参数传给.addEventListener()的回调函数。

// Overwrite the original function with
// one bound to the context of 'user'
user.greeting = user.greeting.bind(user);
// Attach the bound user.greeting as a callback
button.addEventListener('click', user.greeting);

与此同时，我们获得了回调函数的句柄，从而可以随时从元素上移除相应的事件监听。

button.removeEventListener(‘click’, user.greeting);

DEMO:Function.ptototype.bind

想获取Function.prototype.bind的更多信息，请点击的浏览器支持页面，以及polyfill的介绍。

Event对象

Event对象在event第一次触发的时候被创建出来，并且一直伴随着事件在DOM结构中流转的整个生命周期。event对象会被作为第一个参数传递给事件监听的回调函数。我们可以通过这个event对象来获取到大量当前事件相关的信息：

type (String) —— 事件的名称
target (node) ——事件起源的DOM节点
currentTarget(node) —— 当前回调函数被触发的DOM节点（后面会做比较详细的介绍）
bubbles (boolean) —— 指明这个事件是否是一个冒泡事件（接下来会做解释）
preventDefault(function) —— 这个方法将阻止浏览器中用户代理对当前事件的相关默认行为被触发。比如阻止<a>元素的click事件加载一个新的页面
stopPropagation (function) —— 这个方法将阻止当前事件链上后面的元素的回调函数被触发，当前节点上针对此事件的其他回调函数依然会被触发。（我们稍后会详细介绍。）
stopImmediatePropagation (function) —— 这个方法将阻止当前事件链上所有的回调函数被触发，也包括当前节点上针对此事件已绑定的其他回调函数。
cancelable (boolean) —— 这个变量指明这个事件的默认行为是否可以通过调用event.preventDefault来阻止。也就是说，只有cancelable为true的时候，调用event.preventDefault才能生效。
defaultPrevented (boolean) —— 这个状态变量表明当前事件对象的preventDefault方法是否被调用过
isTrusted (boolean) —— 如果一个事件是由设备本身（如浏览器）触发的，而不是通过JavaScript模拟合成的，那个这个事件被称为可信任的(trusted)
eventPhase (number) —— 这个数字变量表示当前这个事件所处的阶段(phase):none(0), capture(1),target(2),bubbling(3)。我们会在下一个部分介绍事件的各个阶段
timestamp (number) —— 事件发生的时间