在 Web 前端开发中，事件处理是一个常见的任务。了解事件冒泡和事件捕获是成为一个更好的前端开发者的关键一步。在本文中，我们将深入探讨这两个概念，同时提供一些简单易懂的代码示例。
事件冒泡
事件冒泡是指事件从最具体的元素开始，然后逐级向上传播到最不具体的元素。在 DOM 树中，它类似于泡泡从底部向上冒出。这意味着如果您单击一个按钮，与该按钮相关的所有父元素上都会触发单击事件。
让我们看一个例子：
<!DOCTYPE html>
<html>
<head>
<title>事件冒泡示例</title>
</head>
<body>
<div id="outer">
<div id="inner">
<button id="myButton">点击我</button>
</div>
</div>
<script>
const outer = document.getElementById("outer");
const inner = document.getElementById("inner");
const button = document.getElementById("myButton");
outer.addEventListener("click", () => {
console.log("外层 div 被点击");
});
inner.addEventListener("click", () => {
console.log("内层 div 被点击");
});
button.addEventListener("click", () => {
console.log("按钮被点击");
});
</script>
</body>
</html>
在这个示例中，当我们点击按钮时，控制台会显示：
按钮被点击
内层 div 被点击
外层 div 被点击
这是因为事件首先从按钮开始冒泡，然后传播到内层 div，最后到达外层 div。
事件捕获
与事件冒泡相反，事件捕获从最不具体的元素开始，然后逐级向下传播到最具体的元素。这就像捕获从顶部向下扩散一样。
让我们修改上面的示例，使用事件捕获：
outer.addEventListener(
"click",
() => {
console.log("外层 div 被点击 - 捕获阶段");
},
true
);
inner.addEventListener(
"click",
() => {
console.log("内层 div 被点击 - 捕获阶段");
},
true
);
button.addEventListener(
"click",
() => {
console.log("按钮被点击");
},
true
);
通过将 true 作为第三个参数传递给 addEventListener，我们启用了事件的捕获阶段。现在，当我们再次点击按钮时，控制台会显示：
外层 div 被点击 - 捕获阶段
内层 div 被点击 - 捕获阶段
按钮被点击
事件冒泡和事件捕获的应用
理解事件冒泡和事件捕获对于处理复杂的交互非常重要。您可以使用这些概念来创建更灵活和可维护的代码，同时避免不必要的事件冲突。
例如，可以在包含多个按钮的父容器上监听点击事件，而不是在每个按钮上都添加单独的事件监听器。然后，您可以根据触发事件的目标来执行不同的操作。
希望本文对您有所帮助，也希望路过的大佬不吝赐教！
扫描二维码关注公众号，回复：
17051186 查看本文章
