共计 1339 个字符，预计需要花费 4 分钟才能阅读完成。
JS 与 HTML 的交互是通过事件来实现的。通过侦听器来预定事件，以便事件发生时执行相应的代码。这些侦听器用于为事件处理程序属性赋值处理函数、可以是 addEventListener，也可以是 attachEvent，后边将详细讲述。
事件流
首先需要了解一下事件流，所谓事件流就是页面接收事件的顺序。DOM2 规定了事件流有三个阶段，捕获阶段、处于目标极端和事件冒泡阶段。也就是说较为不具体的节点先收到事件（例如 document），一层一层往下传播事件，直到到达目标元素。我们可以根据需要在捕获阶段拦截事件，但是一般情况下我们依旧在冒泡阶段处理事件。需要注意的是 IE 的事件冒泡是说事件从目标元素开始一层一层网上传播事件，直到遇到 document。
事件处理程序
接收到了事件，我们要对它做出相应的处理，这就用到了事件处理程序，其实就是一个函数。事件处理程序可以是直接以标签 onclick 属性值存在的一段代码，我们称之为 HTML 事件处理程序，这种事件处理程序在执行的时候会扩大作用域，可以访问 document 和自身的成员，如果目标元素是表单，还能访问父元素 form 中的其他元素。其扩展作用域方法为：
function(){
with(document){
with(this){
// 元素属性
}
}
}
DOM 先后提出了 DOM0 和 DOM2 级的事件处理程序，DOM0 级是通过 JavaScript 指定事件处理程序的传统方式，即给事件处理程序属性赋值函数。DOM0 级的事件处理程序被认为是元素的方法，因而在元素的作用域中执行。
var btn = document.getElementById(“myBtn”);
btn.onclick = function(){
alert(this.id); //myBtn
}
DOM2 级的事件处理程序指定了两个方法：addEventListener 和 removeEventListener，他们接收 3 个参数，分别是事件名、作为事件处理程序的函数，一个布尔值，这个布尔值为 true 时指定了在捕获事件阶段调用事件处理程序，一般情况下为 false，即在事件冒泡阶段调用事件处理程序。前边说到了 IE 的事件流是事件冒泡，那么第三个参数就不需要了，在 IE 事件处理程序中指定了类似的两个方法：attachEvent 和 detachEvent。DOM2 级事件和 IE 事件都可以为目标元素添加多个事件处理程序，而 DOM0 级则只能指定一个事件处理程序。另外 DOM2 级事件和 IE 事件对事件的执行顺序是不一样的，DOM2 是按照事件的添加顺序来触发处理程序，而 IE 则是先触发后添加的事件侦听器，即与 DOM2 相反。另外值得提一下的是 IE 的 attachEvent 与 DOM0、DOM2 级方法的事件处理程序的作用域不一样，前者会在全局作用域中执行，而后者在当前元素的作用域内执行。
var btn = document.getElementById(“myBtn”);
var handle = function(){
alert(this === window); //true
}
btn.attachEvent(“onclick”, handle);
因而在自己编写跨浏览器的事件处理程序时要注意一下 IE 的作用域的问题，以及 DOM0 只能支持一个时间处理程序。