DOM 事件：深入浅出地理解事件流和事件委托

2023-11-18 01:38:21

在 Web 开发的世界中，事件是桥梁，它连接着用户交互和应用程序的响应。它允许 JavaScript 侦听和处理各种用户行为，例如点击、滚动和键盘输入。为了让浏览器和 JavaScript 程序之间有效地沟通，需要一个明确的事件流和健壮的事件委托机制。

事件流

事件流定义了事件传播的路径，从事件发生的目标元素到它最终到达的根元素（document 对象）。在这个过程中，事件经历了三个阶段：

捕获阶段： 事件从根元素开始向下传播到目标元素。在这阶段，可以取消事件，防止其到达目标。
目标阶段： 事件到达目标元素。只有在这个阶段才能触发事件处理程序。
冒泡阶段： 事件从目标元素向上传播到根元素。和捕获阶段类似，可以取消事件，防止其到达根元素。

事件委托

事件委托是一种优化事件处理的强大技术。它涉及将事件监听器附加到文档中较高的父元素，而不是直接附加到目标元素上。当用户与子元素交互时，事件会被委托到父元素，从而提高性能和代码的可重用性。

事件委托的关键在于事件流的冒泡阶段。当事件冒泡到父元素时，可以检查事件目标以确定它是否与所需的子元素匹配。如果匹配，则触发适当的事件处理程序。

实践应用

让我们以一个简单的示例来说明事件流和事件委托的工作原理：

<button id="button">点击我</button>

<script>
  // 直接事件监听
  document.getElementById("button").addEventListener("click", () => {
    console.log("按钮直接点击");
  });

  // 事件委托
  document.addEventListener("click", (e) => {
    if (e.target.id === "button") {
      console.log("按钮委托点击");
    }
  });
</script>