DOM 事件

JavaScript和HTML的交互是通过事件实现的。JavaScript采用异步事件驱动编程模型，当文档、浏览器、元素或与之相关对象发生特定事情时，浏览器会产生事件。

• 事件是某个行为或者触发，比如点击、鼠标移动。
• 当用户点击鼠标时。
• 当网页已加载时。
• 当图像已加载时。
• 当鼠标移动到元素上时。
• 当用户触发按键时...

事件流

事件流描述的是从页面中接收事件的顺序，主要有三种模型：

1. IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素。
2. Netscape的事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反。
3. DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段。

DOM0 和 DOM2 事件

• DOM0 主要通过 HTML 内联方式和 JavaScript 指定事件处理程序实现事件监听。

1. HTML 内联方式：元素支持的每个事件都可以使用一个相应事件处理程序同名的 HTML 属性指定。这个属性的值应该是可以执行的 JavaScript 代码。
2. JavaScript 指定事件处理程序：通过 JavaScript 指定事件处理程序就是把一个方法赋值给一个元素的事件处理程序属性。每个元素都有自己的事件处理程序属性，这些属性名称通常为小写，如 onclick 等，将这些属性的值设置为一个函数，就可以指定事件处理程序。

• DOM2 则定义了两个方法用于处理指定和删除事件处理程序的操作：

1. addEventListener
2. removeEventListener

• 所有的DOM节点都包含这两个方法，并且它们都接受三个参数：

1. 事件类型。
2. 事件处理方法。
3. 布尔参数，如果是 true 表示在捕获阶段调用事件处理程序，如果是 false，则是在事件冒泡阶段处理。

attachEvent 与 addEventListener 的区别

1. 参数个数不相同，这个最直观，addEventListener 有三个参数，attachEvent 只有两个，attachEvent 添加的事件处理程序只能发生在冒泡阶段，addEventListener 第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）。
2. 第一个参数意义不同，addEventListener 第一个参数是事件类型（比如click，load），而 attachEvent 第一个参数指明的是事件处理函数名称（onclick，onload）。
3. 事件处理程序的作用域不相同，addEventListener 的作用域是元素本身，this 是指的触发元素，而 attachEvent 事件处理程序会在全局变量内运行，this 是 window。
4. 为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener 添加会按照添加顺序执行，而 attachEvent 添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)。

IE 事件冒泡和 DOM2 事件传播机制

• IE 事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素。
• DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段。

阻止事件冒泡和取消默认事件

• DOM 中的事件对象：可以通过 stopPropagation() 方法阻止事件冒泡；通过 preventDefault() 方法取消默认事件。
• IE中的事件对象：可以通过设置 cancelBubble 为 true 来阻止事件冒泡；设置 returnValue 为 false 来取消默认事件。

【注】版权归 Lucifer 所有，转载请联系作者。