JavaScript 事件冒泡与捕获机制详解及跨浏览器兼容处理

事件冒泡与捕获的基本概念

冒泡型事件是指事件触发顺序遵循从最具体的目标元素向最不具体的祖先元素（即 document 对象）逐级传递的机制。

在 IE 5.5 版本中，事件冒泡路径为：div -> body -> document。

在 IE 6.0 版本中，事件冒泡路径扩展为：div -> body -> html -> document。

Mozilla 1.0 浏览器遵循的路径为：div -> body -> html -> document -> window。

捕获型事件（event capturing）指事件从最不具体的对象（document 对象）开始向下传递，直至到达最具体的目标元素。虽然可以在窗口级别捕获事件，但这需要开发人员显式指定。

DOM 事件流同时支持捕获型和冒泡型两种事件模型，其中捕获型事件先发生。这两种事件流会遍历 DOM 树中的所有对象，起点和终点均为 document 对象。

DOM 事件模型的一个显著特征是文本节点也会触发事件，而在 IE 浏览器中文本节点通常不触发事件。

支持 W3C 标准的浏览器通过 addEventListener(event, fn, useCapture) 方法添加事件，其中第三个参数 useCapture 为布尔值，用于指定事件在捕获阶段还是冒泡阶段执行。对于不兼容 W3C 标准的 IE 浏览器，使用 attachEvent() 方法，该方法无此参数设置，但默认在冒泡阶段执行（相当于 useCapture 为 false）。因此，将 useCapture 设置为 false 可实现较好的浏览器兼容性。

不同浏览器的实现差异

事件捕获阶段：事件从最顶层标签开始向下查找，直至到达事件目标（target）。 事件冒泡阶段：事件从目标（target）开始向上冒泡，直至页面最顶层标签。 假设有一个 div 元素，其内部包含一个 p 子元素： <div> <p>元素</p> </div> 若这两个元素均绑定了 click 事件，当用户点击 p 元素时，div 和 p 上的 click 事件处理程序执行顺序如何？ 两种模型 早期，Netscape 和 Microsoft 采用了不同的实现方式。

在 Netscape 的实现中，父级元素 div 先触发事件，这被称为事件捕获。

在 Microsoft 的实现中，子级元素 p 先触发事件，这被称为事件冒泡。

两种事件处理顺序恰好相反。IE 仅支持事件冒泡，不支持捕获；Mozilla、Opera 7 及 Konqueror 同时支持两种模式；而旧版 Opera 和 iCab 均不支持这两种模式。

事件捕获机制：当使用事件捕获时，父级元素先触发，子级元素后触发，即 div 先触发，p 后触发。

事件冒泡机制：当使用事件冒泡时，子级元素先触发，父级元素后触发，即 p 先触发，div 后触发。

W3C 模型是对上述两种模型的折中。在 W3C 模型中，事件发生时，首先从顶层开始进行事件捕获，直到到达事件源元素；随后，再从事件源元素向上进行事件冒泡，直至到达 document。

W3C 标准下的事件绑定与兼容处理

程序员在绑定事件时，可以通过 addEventListener 函数选择采用捕获还是冒泡。该函数包含三个参数，若第三个参数为 true，则采用事件捕获；若为 false，则采用事件冒泡。

ele.addEventListener('click',doSomething2,true)

true 表示采用捕获模式

false 表示采用冒泡模式

传统绑定事件方式：在支持 W3C DOM 的浏览器中，常规的事件绑定方式默认采用事件冒泡。

ele.onclick = doSomething2

IE 浏览器处理方式：如前所述，IE 仅支持事件冒泡，不支持捕获，且不支持 addEventListener 函数及第三个参数。IE 提供了 attachEvent 函数。

ele.attachEvent("onclick", doSomething2);

补充说明事件冒泡过程：事件从发生的目标（event.srcElement 或 event.target）开始，沿文档树逐层向上冒泡，最终到达 document。

事件传播可以被阻止： • 在 W3C 标准中，使用 stopPropagation() 方法。 • 在 IE 浏览器中，设置 cancelBubble = true。 在捕获过程中调用 stopPropagation() 后，后续的冒泡过程也不会发生。 3. 阻止事件的默认行为，例如点击 <a> 标签后的页面跳转： • 在 W3C 标准中，使用 preventDefault() 方法。 • 在 IE 浏览器中，设置 window.event.returnValue = false。 4. 本文内容基于测试编写，并非所有事件都能冒泡，例如：blur、focus、load、unload（注：此部分观点摘自他人文章，作者未进行实际测试）。