事件捕获与事件冒泡：理解事件传播的奥秘

当用户在网页上执行操作时，浏览器会自动触发一系列事件。这些事件可以在页面中的任何元素上发生，如按钮、链接、表单元素等。当事件发生时，浏览器会根据事件传播机制将事件传递给相关元素。

事件传播有两种机制：事件冒泡和事件捕获。

事件冒泡

事件冒泡是一种事件传播机制，它允许事件从目标元素一直向上传播到父元素，再逐级向上传播，直到到达文档根元素。

当一个事件发生时，浏览器首先会将该事件传递给目标元素。如果目标元素没有注册该事件的监听器，或者监听器没有处理该事件，那么浏览器会将该事件传递给目标元素的父元素。以此类推，如果父元素也没有注册该事件的监听器，或者监听器没有处理该事件，那么浏览器会将该事件传递给父元素的父元素，依此类推，直到到达文档根元素。

事件捕获

事件捕获是一种事件传播机制，它允许事件从文档根元素向下传播到子元素，再逐级向下传播，直到到达目标元素。

当一个事件发生时，浏览器首先会将该事件传递给文档根元素。如果文档根元素没有注册该事件的监听器，或者监听器没有处理该事件，那么浏览器会将该事件传递给文档根元素的子元素。以此类推，如果子元素也没有注册该事件的监听器，或者监听器没有处理该事件，那么浏览器会将该事件传递给子元素的子元素，依此类推，直到到达目标元素。

事件委托

事件委托是一种事件处理技术，它允许将事件监听器注册到父元素上，然后在父元素的事件处理函数中检查事件的目标元素。如果目标元素是该父元素的子元素，那么就可以使用事件委托来处理该事件。

事件委托的好处在于，它可以减少注册事件监听器的数量，从而提高页面的性能。此外，事件委托还可以让代码更加简洁和易于维护。

实例演示

以下是一个事件委托的示例代码：

<div id="parent">
  <button id="child">按钮</button>
</div>

document.getElementById("parent").addEventListener("click", function(e) {
  if (e.target.id === "child") {
    console.log("按钮被点击了！");
  }
});

在上面的代码中，我们首先获取了父元素（#parent）的元素对象，然后在父元素上注册了一个click事件监听器。在事件监听器中，我们检查事件的目标元素（e.target）是否是子元素（#child）。如果是，则在控制台输出"按钮被点击了！"。

通过使用事件委托，我们只需要在父元素上注册一个事件监听器，就可以处理所有子元素的click事件。这可以大大减少注册事件监听器的数量，从而提高页面的性能。