JS 事件捕获与冒泡，掌握事件流运作原理

前端

2024-02-13 13:18:43

在 JavaScript 中，事件处理程序用于处理 HTML 元素上的事件。当一个事件发生时，比如单击、鼠标悬停或键盘按下，浏览器会触发该事件的事件处理程序。事件处理程序可以是内联的（直接写在 HTML 代码中）或通过事件监听器添加的。

事件流是事件从触发元素传播到文档根元素的过程。事件流分为三个阶段：捕获、目标和冒泡。

捕获阶段： 事件从文档根元素开始传播，沿途经过所有父元素，直到触发元素。在捕获阶段，事件处理程序按从文档根元素到触发元素的顺序执行。
目标阶段： 当事件到达触发元素时，就会进入目标阶段。在目标阶段，与触发元素绑定的事件处理程序将被执行。
冒泡阶段： 在目标阶段之后，事件会继续向上传播，经过触发元素的所有父元素，直到文档根元素。在冒泡阶段，事件处理程序按从触发元素到文档根元素的顺序执行。

事件捕获和冒泡可以用来实现一些有趣的效果，比如：

使用事件捕获来阻止事件冒泡，防止事件处理程序在不必要的时候执行。
使用事件冒泡来实现事件委托，即在一个父元素上绑定事件处理程序，然后让该处理程序处理所有子元素的事件。

理解 JavaScript 事件捕获和冒泡对于构建交互式 Web 应用非常重要。掌握了事件流的运作原理，你就可以更好地控制事件的传播，并创建更加健壮和高效的 Web 应用。

下面是一个示例，演示如何使用事件捕获和冒泡来实现事件委托：

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

// 捕获阶段
document.addEventListener("click", function(event) {
  console.log("Document was clicked");
}, true);

// 目标阶段
document.getElementById("child").addEventListener("click", function(event) {
  console.log("Child button was clicked");
}, false);

// 冒泡阶段
document.getElementById("parent").addEventListener("click", function(event) {
  console.log("Parent div was clicked");
}, false);