事件捕捉和事件冒泡：深入浅出解读事件流程

2023-12-04 22:57:15

在前端开发中，事件捕获和事件冒泡是两个重要的概念，它们决定了事件在浏览器中的传播和处理流程。理解这两个概念有助于我们更好地处理用户交互，实现更复杂的交互效果。

事件捕获

事件捕获是指事件从文档的最外层元素开始向下传播，逐层传递到目标元素的过程。在这个过程中，如果某个元素的事件监听器返回 true，则事件将被捕获并停止进一步传播。

以下示例演示了事件捕获的过程：

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

<script>
  document.getElementById("parent").addEventListener("click", function(e) {
    console.log("Parent Captured!");
    e.stopPropagation();
  }, true);

  document.getElementById("child").addEventListener("click", function(e) {
    console.log("Child Clicked!");
  });
</script>

在这个示例中，当点击 child 按钮时，事件会首先传播到 parent 元素。由于 parent 元素的事件监听器返回 true，因此事件被捕获并停止进一步传播。因此，child 元素的事件监听器不会被触发。

事件冒泡

事件冒泡是指事件从目标元素开始向上传播，逐层传递到文档的最外层元素的过程。在这个过程中，如果某个元素的事件监听器返回 false，则事件将继续向上冒泡，直到到达文档的最外层元素。

以下示例演示了事件冒泡的过程：

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

<script>
  document.getElementById("parent").addEventListener("click", function(e) {
    console.log("Parent Clicked!");
  });

  document.getElementById("child").addEventListener("click", function(e) {
    console.log("Child Clicked!");
    e.stopPropagation();
  }, true);
</script>