事件处理程序事件，就是文档中发生的一些特定的交互的瞬间，它是用户或者用户代理执行的某种动作如 click、focus、load 等等。可以用事件处理程序来响应某个事件，这样，就可以在特定事件发生时做一些特定的事情。所谓事件处理程序，用一句话来概括：就是当特定事件发生时指定执行的特定代码。
在具体介绍事件处理程序之前，还需要介绍一个概念：事件流。事件流描述的是从页面接收事件的顺序，DOM2 级事件规定事件流包括 3 个阶段：事件捕获阶段，目标阶段，和事件冒泡阶段。也就是说，发生一个事件时，页面的顶层节点最先接收到它，然后逐级往下传播，最后到达发生事件的目标节点，事件并没有终止传播，而是接着向上层节点冒泡直至达到顶层节点。在 DOM 的事件流中规定目标不在捕获阶段接收到事件，目标阶段被包含进冒泡阶段。但多数浏览器都支持在两个阶段获取事件。
在 DOM0 级中指定事件处理程序的方式就是将一个函数（即事件处理方法）赋值给一个事件处理程序属性。每个元素都有自己的事件处理程序属性，如 window.onclick。使用 DOM0 级方法指定的事件处理程序被认为是元素的方法，因此，这时候事件处理程序在元素的作用域中运行，即程序中的 this 指向注册事件处理程序的元素。这里，特意指明是注册事件处理程序的元素，而不是触发事件的目标元素，在很多情况下，这二者相同。但是，有些情况下，它们是不同的。一个典型的例子就是事件委派（文章后部分将会提到），当把事件处理程序注册到更高节点层次上时，注册事件处理程序的元素往往是触发事件的元素的父节点。因此，要注意这样的差别。
清单 1. DOM0 级事件处理程序指定1
2
3
4
5
6
7
| var button = document.getElementById("myButton");
button.onclick = function () {
//this 指向元素 button，因此 alert 输出为 myButton
alert( this.id );
};
// 只需要将 onclick 属性值置空即可删除事件处理程序
button.onclick = null;
|
DOM0 级只是简单的将事件处理程序赋值给特定的节点事件处理程序属性。在 DOM2 级事件处理程序定义中，指定了两个方法用于指定和删除事件处理程序：addEventListener() 和 removeEventListener()，这两个方法都接受 3 个参数，要处理的事件，事件处理函数和一个布尔值。这个布尔值参数为 true 表示在事件捕获阶段调用事件处理程序，false 则表示在事件冒泡阶段调用事件处理程序。
清单 2. DOM2 级事件处理程序指定1
2
3
4
5
6
7
8
9
| var button = document.getElementById("myButton");
var handler = function () {
alert( this.id );
};
button.addEventListener( "click", handler, false);
// 省略其他代码
//移除处理程序
button.removeEventListener( "click", handler, false);
|
使用 DOM2 级方法添加事件处理程序的好处是可以同时添加多个事件处理程序。而 DOM0 级事件处理程序属性每次只能指定一个函数，如果同时指定多个处理函数，则只有最后一个值会生效，就像定义变量那样，前面的值被新的值覆盖。 IE9 以前没有实现 DOM2 级标准定义的方法，而是实现了与 DOM 中类似的两个方法：attachEvent() 和 detachEvent()。这两个方法接受两个参数，事件处理程序名和事件处理函数。在 IE 中可以使用 DOM0 级定义的事件处理程序指定方法，也可以使用 attachEvent()，它与使用 DOM0 级方法的主要区别在于事件处理程序的作用域。使用 attachEvent()方法注册的事件处理程序会在全局作用域中运行，即 this == window。
清单 3. IE 事件处理程序指定1
2
3
4
5
6
| var button = document.getElementById("myButton");
var handler = function () {
alert( this == window ); //true
};
button.attachEvent( "onclick", handler);
button.detachEvent( "onclick", handler);
|
以上介绍的是 DOM0 级事件处理程序指定方法、DOM2 级事件处理程序指定方法以及 IE9 以前的事件处理程序指定方法，不同的浏览器对 DOM 的实现情况不同，事件处理程序指定方法也不同，甚至 event 对象也有两种，这给开发者在跨浏览器编程中带来麻烦，在下一章节我们会简单介绍跨浏览器的事件处理程序指定方法的 Dojo 实现，即屏蔽了各个浏览器差异性的事件处理程序指定的封装。这样使得事件绑定变得更加容易。 |
