理解JS事件机制：捕捉，目标，冒泡

前端

2023-09-23 09:45:14

在网站开发中，事件处理是与用户交互的关键方面。JavaScript (JS) 为我们提供了强大的事件机制，允许我们对各种用户操作做出响应，例如点击、滚动和键盘输入。了解 JS 事件机制对于构建交互式和动态的网页至关重要。

JS 事件机制背后的原理

JS 事件机制遵循称为 事件流 的三个阶段：

事件捕获阶段： 当触发 DOM 事件时，事件从文档的根节点开始传播到目标元素。
目标阶段： 一旦事件到达目标元素，它就会在该元素上触发。这是事件处理程序执行的地方。
事件冒泡阶段： 事件在 DOM 树中向上传播，从目标元素到根节点。

事件捕获和冒泡

在事件流的捕获和冒泡阶段，同一事件将被触发两次，一次在捕获阶段，一次在冒泡阶段。这为我们提供了额外的灵活性，可以根据需要在不同级别处理事件。

捕获： 在捕获阶段，事件在到达目标元素之前被处理。这对于在元素及其祖先中处理事件很有用。
冒泡： 在冒泡阶段，事件在目标元素触发后被处理。这对于处理在元素或其后代中发生的事件很有用。

事件处理程序

我们使用事件处理程序来响应特定事件。它们可以是内联的（直接嵌入到 HTML 元素中）或通过 JavaScript 附加的。有两种常见的事件处理程序类型：

onClick： 响应元素上的点击。
addEventListener： 允许我们为各种事件类型附加事件处理程序，例如单击、滚动和键盘事件。

实用示例

让我们考虑一个带有嵌套元素的简单 HTML 结构：

<div id="parent">
  <button id="child">Click me</button>
</div>

我们可以使用 JavaScript 为按钮上的点击事件设置事件处理程序：

const button = document.getElementById("child");

// 添加一个事件处理程序，在捕获阶段触发
button.addEventListener("click", (event) => {
  event.stopPropagation();
  console.log("Click captured on button");
}, true);

// 添加一个事件处理程序，在目标阶段触发
button.addEventListener("click", (event) => {
  console.log("Click on button");
});

// 添加一个事件处理程序，在冒泡阶段触发
const parent = document.getElementById("parent");
parent.addEventListener("click", (event) => {
  console.log("Click bubbled to parent");
});