图解 JavaScript 事件流：冒泡、捕获与 DOM3 阶段解析

什么是事件与事件流？

事件（Event）代表文档或浏览器窗口中发生的某个有意义的时刻，例如用户点击按钮、鼠标悬停在元素上或页面加载完成。它是 JavaScript 与 HTML 页面进行交互的核心桥梁。

事件流则是指页面接收事件的顺序。当一个事件发生时，它并不只在触发的元素上瞬间结束，而是在 DOM 树的结构中按照特定规则进行传播。理解这个传播顺序，对于处理复杂 UI 交互和防止事件冲突至关重要。

两大经典事件模型

在早期的浏览器发展史中，Netscape 和 Microsoft 对事件传播顺序有着不同的定义，这分别形成了“事件冒泡”和“事件捕获”两种模型。

第1步：理解事件冒泡（Event Bubbling）

目的：理解为什么子元素的点击可能会触发父元素的监听器。

原理：事件从最具体的节点（DOM 树的叶子节点，即实际被操作的元素）开始触发，然后向上传播至没有那么具体的节点（DOM 树的根节点，即 document）。

示例场景：

<!-- HTML 结构 -->
<body>
    <div>点击我</div>
</body>

当用户点击 <div> 元素时：

1. 首先触发 <div> 上的 click 事件；
2. 接着事件沿 DOM 树一路向上，经过 <body>、<html>，最终到达 document；
3. 如果在这些父节点上都绑定了监听器，它们都会依次执行。

图注：事件冒泡示意图（由内向外传播）

Tips：由于事件冒泡模型兼容性极好且符合直觉，现代开发中默认通常使用此模型。

第2步：理解事件捕获（Event Capturing）

目的：了解如何在事件到达目标前进行预处理或拦截。

原理：与冒泡相反，事件从最不具体的节点（DOM 树的根节点）最先收到，然后沿 DOM 树一直向下传播，直到最具体的节点（DOM 树的叶子节点）最后收到事件。

示例场景：

同样在上述 HTML 结构中点击 <div>：

1. 事件首先由 document 捕获；
2. 沿着 DOM 树向下：document → <html> → <body>；
3. 最终到达目标元素 <div>；
4. 如果在这些父节点设置了捕获监听器，它们会在子元素响应之前先执行。

图注：事件捕获示意图（由外向内传播）

作用：可以在事件达到最终目标前拦截事件（例如阻止默认的点击行为或记录全局点击日志）。

Tips：由于早期版本的 IE 浏览器不支持事件捕获，在实际开发中较少单独使用纯捕获模式，除非为了兼容特定的拦截需求。

DOM3 事件流的三个阶段

为了解决两大模型的争议，W3C 在 DOM2 Events 规范中将事件流正式标准化为三个阶段：

1. 捕获阶段（Capturing Phase）
2. 目标阶段（Target Phase）
3. 冒泡阶段（Bubbling Phase）

第3步：完整 DOM 事件流触发过程

入口：任何 DOM 元素的交互事件。

动作与顺序：

<!-- HTML 结构 -->
<body>
    <div>点击我</div>
</body>

当我们点击 <div> 时，完整的流程如下：

1. 捕获阶段：document → <html> → <body>。注意：根据规范，实际的 div 元素在此阶段不会接收到事件，因为它是目标节点。
   对应图中序号 1, 2, 3
2. 目标阶段：事件到达 <div> 元素本身。这里会触发 <div> 上的事件监听器。
   对应图中序号 4
3. 冒泡阶段：<body> → <html> → document。这是大多数开发者编写逻辑的阶段。
   对应图中序号 5, 6, 7

图注：DOM3 事件流三个阶段详解

重要补充：

虽然 DOM2 Events 规范明确指出在捕获阶段不应在目标元素上触发事件，但在现代浏览器实现中，事件目标通常会在这两个机会中都触发一次（一次是在捕获阶段的末尾，一次是在目标/冒泡的开始）。

这意味着，如果你在同一个元素上同时注册了捕获和冒泡模式的监听器，它们会在不同的时间点被执行，这为更精细的控制提供了可能。

总结

掌握 JavaScript 事件流的关键在于理清“方向”。事件冒泡是由内而外，适合大多数常规业务逻辑；事件捕获是由外而内，适合全局拦截与监控。现代浏览器遵循 DOM3 规范，将两者统一在捕获-目标-冒泡三个有序阶段中执行。

以上就是 JavaScript 事件流的详细内容，更多关于 JavaScript 事件机制、DOM 节点操作的相关资料请关注本站其它相关文章！