事件冒泡与捕获：前端世界的层层通报机制

元素的 click 事件处理程序，最后触发 元素的 click 事件处理程序。

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

// 为 #child 元素注册 click 事件处理程序
document.getElementById("child").addEventListener("click", function() {
  console.log("Button clicked!");
});

// 为 #parent 元素注册 click 事件处理程序
document.getElementById("parent").addEventListener("click", function() {
  console.log("Div clicked!");
});

当你点击按钮时，你会看到如下输出：

Button clicked!
Div clicked!

2、事件捕获：从外到里，逆向传递

事件捕获与事件冒泡相反，它是事件从根元素开始，逐层向下传播到子元素的过程。事件捕获很少使用，因为它通常不符合直觉，并且可能导致意外的行为。

要启用事件捕获，您需要在 addEventListener() 方法的第三个参数中指定 true 值。例如：

document.getElementById("parent").addEventListener("click", function() {
  console.log("Div clicked!");
}, true);

现在，当你点击按钮时，你会看到如下输出：

Div clicked!
Button clicked!

3、事件委托：高效处理，减少代码量

事件委托是一种处理事件的技巧，它可以减少代码量并提高性能。事件委托的工作原理是，将事件处理程序注册到父元素上，而不是子元素上。当子元素触发事件时，该事件会冒泡到父元素，然后父元素的事件处理程序就会被触发。

事件委托的优点在于，它可以减少需要注册的事件处理程序的数量。例如，假设我们有一个包含 100 个按钮的页面。如果我们为每个按钮注册一个 click 事件处理程序，那么我们需要注册 100 个事件处理程序。但是，如果我们使用事件委托，我们只需要注册一个 click 事件处理程序到父元素上。

<div id="parent">
  <button class="button">Click me!</button>
  <button class="button">Click me!</button>
  <button class="button">Click me!</button>
</div>

// 为 #parent 元素注册 click 事件处理程序
document.getElementById("parent").addEventListener("click", function(event) {
  // 检查 event.target 属性以确定哪个按钮被点击
  if (event.target.classList.contains("button")) {
    console.log("Button clicked!");
  }
});

现在，无论哪个按钮被点击，都会触发父元素的 click 事件处理程序。

4、总结

事件冒泡、事件捕获和事件委托是 JavaScript 中处理事件的三种重要机制。事件冒泡是从子元素到父元素的事件传播过程，事件捕获是从父元素到子元素的事件传播过程，事件委托是一种通过将事件处理程序注册到父元素上 来减少代码量并提高性能的技巧。

掌握这些机制可以帮助您构建更加响应式和用户友好的 web 应用程序。