浏览器事件的捕获与冒泡：全面解析

前端

2023-11-10 10:17:43

浏览器事件处理的幕后故事：捕获、目标和冒泡

想象一下，你在网上浏览，点击一个按钮，突然，一大堆东西发生了。按钮发生了变化，页面内容改变了，甚至弹出了一个新窗口。这一切是如何发生的？答案就在于浏览器事件模型。

浏览器事件模型：捕获、目标和冒泡

浏览器事件模型是一个复杂但强大的系统，它负责处理用户与网页的交互。当发生事件（比如点击或移动鼠标）时，浏览器会经历三个阶段的处理：

1. 捕获阶段

在这个阶段，事件从网页的根元素向下传播到目标元素。在这个阶段注册的任何事件监听器都会在事件到达目标元素之前被触发。

2. 目标阶段

在这个阶段，事件到达了目标元素，触发了在这个元素上注册的任何事件监听器。

3. 冒泡阶段

在这个阶段，事件从目标元素向上传播到根元素。在这个阶段注册的任何事件监听器都会在事件到达根元素之前被触发。

使用 useCapture 参数

addEventListener() 方法有一个称为 useCapture 的可选参数，它控制事件处理程序是在捕获阶段还是冒泡阶段触发。如果 useCapture 为 true，处理程序将在捕获阶段触发；如果为 false（默认值），将在冒泡阶段触发。

示例：捕获和冒泡

让我们看一个例子来说明捕获和冒泡是如何工作的。考虑以下 HTML 代码：

<html>
<body>
  <div id="parent">
    <button id="child">按钮</button>
  </div>
</body>
</html>

以及以下 JavaScript 代码：

document.getElementById("parent").addEventListener("click", function() {
  console.log("父元素事件处理程序触发");
}, true);

document.getElementById("child").addEventListener("click", function() {
  console.log("子元素事件处理程序触发");
}, false);