DOM 事件流：揭秘事件捕获与冒泡的奥秘

前端

2023-11-09 21:28:40

在 Web 开发的世界中，DOM（文档对象模型）事件流扮演着至关重要的角色，它定义了事件在页面元素间传播的顺序。本文将深入探讨 DOM 事件流中的两个关键概念：事件捕获和事件冒泡，揭示其背后的运作机制和实际应用。

DOM 事件流

当用户与页面元素交互时（如单击按钮、移动鼠标），就会触发 DOM 事件。事件流了这些事件在页面元素间传播的顺序。这个传播过程可以分为三个阶段：捕获阶段、当前目标阶段和冒泡阶段。

事件捕获

事件捕获是一种由最顶层的 DOM 节点（通常是元素）开始的事件传播机制。事件从顶层节点逐级向下传播到最具体的元素，就像一层一层的瀑布流。在捕获阶段，事件在到达目标元素之前会被逐个元素处理。

事件冒泡

事件冒泡与事件捕获相反，它是一种从目标元素逐级向上传播到最顶层 DOM 节点的事件传播机制。在冒泡阶段，事件在目标元素被处理后，会继续向上传播到其父元素，依次类推，直到到达元素。

实际应用

事件捕获和事件冒泡在 Web 开发中有着广泛的应用，包括：

事件代理： 通过在父元素上监听事件，可以统一处理子元素的事件，简化事件处理逻辑。
阻止事件冒泡： 使用 event.stopPropagation() 方法可以阻止事件在 DOM 中继续冒泡，防止不必要的处理。
捕获特定元素的事件： 通过在目标元素的父元素上添加事件监听器，可以捕获特定元素的事件，即使该元素本身不可见。

示例

以下是一个示例，展示了如何使用事件捕获和事件冒泡来处理按钮单击事件：

<html>
<body>
  <div id="parent">
    <button id="child">Click Me</button>
  </div>

  <script>
    // 事件捕获
    document.getElementById("parent").addEventListener("click", function() {
      console.log("Parent captured click event");
    }, true);

    // 当前目标阶段
    document.getElementById("child").addEventListener("click", function() {
      console.log("Child clicked");
    });

    // 事件冒泡
    document.getElementById("parent").addEventListener("click", function() {
      console.log("Parent bubbled click event");
    });
  </script>
</body>
</html>