JS事件的捕获与冒泡：你真的懂吗？

后端

2023-12-03 11:43:37

JS事件剖析：揭秘捕获和冒泡的奥秘

浏览器中的事件处理是一个非常重要的概念，它允许我们动态地与网页进行交互。JS事件是网页交互的核心，它可以响应用户的动作，例如点击、悬停和按键。理解事件流的捕获和冒泡阶段至关重要，它决定了事件如何传播和处理。

事件流：捕获和冒泡阶段

事件流了事件从触发到处理的传播过程。它有两个不同的阶段：

捕获阶段： 事件从最外层元素开始向内传播，经过元素层级树。在此阶段，事件处理程序只会在事件目标元素或其祖先元素中触发。
冒泡阶段： 事件从最内层元素向外传播，返回元素层级树。在此阶段，事件处理程序将依次触发，直到事件到达文档本身。

捕获和冒泡的示例

以下代码演示了捕获和冒泡阶段：

<div id="parent">
  <button id="child">点击我</button>
</div>

// 捕获阶段的事件处理程序
document.addEventListener("click", function(event) {
  console.log("捕获阶段：", event.target.id);
}, true);

// 冒泡阶段的事件处理程序
document.addEventListener("click", function(event) {
  console.log("冒泡阶段：", event.target.id);
}, false);

// 在子元素上添加事件处理程序
document.getElementById("child").addEventListener("click", function(event) {
  console.log("元素处理程序：", event.target.id);
});

当用户点击子按钮时，将会触发以下事件处理程序：

捕获阶段： 事件从document元素开始传播，并触发document的事件处理程序（记录parent）。
冒泡阶段： 事件向上传播，触发#parent元素的事件处理程序（记录parent）。
冒泡阶段： 事件继续向上传播，触发#child元素的事件处理程序（记录child）。

控制事件传播

我们可以使用event.stopPropagation()方法来阻止事件传播。这将阻止事件在当前元素中进一步传播。

document.getElementById("child").addEventListener("click", function(event) {
  console.log("元素处理程序：", event.target.id);
  event.stopPropagation();
});

在上面的示例中，当用户点击子按钮时，只有子元素的事件处理程序会被触发，因为event.stopPropagation()阻止了事件的冒泡。