理解JavaScript事件冒泡与捕获机制，掌握事件流的本质

前端

2023-12-03 15:42:14

事件冒泡与捕获：破解事件流的奥秘

理解事件流

当我们与网页交互时，事件就诞生了。事件可能是鼠标点击、键盘敲击或页面加载等任何动作。事件流了事件从触发源到文档顶部的传播过程，它由三个阶段组成：

捕获阶段： 事件从触发源向文档顶部传播，沿途触发已注册捕获事件监听器的元素。
目标阶段： 当事件到达触发源时，它进入目标阶段，触发触发源上注册的事件监听器。
冒泡阶段： 事件从触发源向文档顶部传播，沿途触发已注册冒泡事件监听器的元素。

事件冒泡与捕获

默认情况下，事件经历冒泡阶段。这意味着事件从触发源传播到文档顶部，触发沿途所有注册了事件监听器的元素。

然而，事件捕获允许我们在捕获阶段处理事件。当事件发生时，它从文档顶部向触发源传播，触发沿途所有注册了捕获事件监听器的元素。

代码示例

让我们通过一个示例来了解事件冒泡和捕获的工作原理。假设我们有一个包含三个 div 元素的容器，每个 div 元素都注册了点击事件监听器。

<div id="container">
  <div id="div1">Div 1</div>
  <div id="div2">Div 2</div>
  <div id="div3">Div 3</div>
</div>

// 添加点击事件监听器
document.getElementById("container").addEventListener("click", function() {
  console.log("Container clicked");
});

document.getElementById("div2").addEventListener("click", function() {
  console.log("Div 2 clicked");
});

document.getElementById("div3").addEventListener("click", function() {
  console.log("Div 3 clicked");
});

// 添加捕获事件监听器
document.getElementById("container").addEventListener("click", function() {
  console.log("Container captured");
}, true);

document.getElementById("div2").addEventListener("click", function() {
  console.log("Div 2 captured");
}, true);

document.getElementById("div3").addEventListener("click", function() {
  console.log("Div 3 captured");
}, true);

当我们点击容器中的任何一个 div 元素时，都会触发相应的事件监听器。如果我们点击 div3，控制台会输出以下内容：

Div 3 clicked
Div 2 clicked
Container clicked
Div 3 captured
Div 2 captured
Container captured

从输出中，我们可以看到事件经历了捕获阶段、目标阶段和冒泡阶段。捕获阶段从文档顶部开始，依次经过 div3、div2、container，触发了注册了捕获事件监听器的元素。目标阶段是指事件到达触发源（div3），触发了 div3 上注册的点击事件监听器。冒泡阶段从触发源开始，依次经过 div2、container，触发了注册了冒泡事件监听器的元素。

实际应用

事件冒泡和捕获机制在实际开发中广泛应用，例如：