当前位置：首页 > article >正文

谈谈对JavaScript 中的事件冒泡（Event Bubbling）和事件捕获（Event Capturing）的理解

article 2025/2/28 15:47:55

JavaScript 中的事件冒泡（Event Bubbling）和事件捕获（Event Capturing），是浏览器在处理事件时采用的两种机制，它们在事件的传播顺序上有显著区别。这两种机制帮助开发者在事件触发时，能够以不同的方式捕获和处理事件。

注意： 要想在冒泡和捕获阶段触发事件，首先要在想要触发事件的dom上绑定事件

1. 事件冒泡（Event Bubbling）

定义： 事件冒泡是指当一个事件被触发时，它会从事件触发的元素（目标元素）开始，逐层向上传播到 DOM 树的根元素（通常是 document 或 window）。

传播顺序：
事件目标元素 -> 父元素 -> 父元素的父元素 -> … -> document -> window

使用场景：

父子元素的事件代理：当父元素绑定事件时，子元素的事件会“冒泡”到父元素，可以通过父元素来统一管理子元素的事件。
事件委托：在很多情况下，我们并不想为每个子元素都绑定事件，而是可以将事件绑定到父元素上，利用事件冒泡的特性来处理子元素的事件。

代码示例：事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件冒泡示例</title>
</head>
<body>
  <div id="parent" style="width: 300px; height: 300px; background-color: lightblue;">
    <button id="child">Click Me</button>
  </div>

  <script>
    document.getElementById("parent").addEventListener("click", function () {
      alert("Parent clicked");
    });

    document.getElementById("child").addEventListener("click", function () {
      alert("Child clicked");
    });
  </script>
</body>
</html>

行为解释：

当点击按钮（子元素）时，先触发按钮的 click 事件，显示“Child clicked”。
然后，事件会冒泡到父元素 div，触发父元素的 click 事件，显示“Parent clicked”。

输出顺序：

“Child clicked”
“Parent clicked”

2. 事件捕获（Event Capturing）

定义： 事件捕获与冒泡相反，是指事件从根元素开始，逐层向下传播，直到触发事件的目标元素。

传播顺序：
window -> document -> 祖父元素 -> 父元素 -> 目标元素

使用场景：

精确控制事件处理的顺序：当需要在事件到达目标元素之前就进行干预时，可以使用事件捕获。
用于某些特殊的交互设计：例如，在父元素捕获事件之前阻止事件的冒泡行为。

代码示例：事件捕获

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件捕获示例</title>
</head>
<body>
  <div id="parent" style="width: 300px; height: 300px; background-color: lightblue;">
    <button id="child">Click Me</button>
  </div>

  <script>
    document.getElementById("parent").addEventListener("click", function () {
      alert("Parent clicked (Capture)");
    }, true);  // 注意，第三个参数设置为true表示使用捕获

    document.getElementById("child").addEventListener("click", function () {
      alert("Child clicked");
    });
  </script>
</body>
</html>

行为解释：

当点击按钮时，事件首先触发父元素 div 的 click 事件（因为它在捕获阶段）。显示“Parent clicked (Capture)”。
然后，事件会传播到按钮元素，显示“Child clicked”。

输出顺序：

“Parent clicked (Capture)”
“Child clicked”

3. 事件的默认顺序和使用 `stopPropagation` 和 `preventDefault`

stopPropagation()：阻止事件的进一步传播。它可以防止事件在冒泡或捕获阶段继续传播。
preventDefault()：阻止事件的默认行为，比如点击链接时不跳转，表单提交时不刷新页面。

示例：`stopPropagation()` 和 `preventDefault()`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件传播控制</title>
</head>
<body>
  <div id="parent" style="width: 300px; height: 300px; background-color: lightblue;">
    <button id="child">Click Me</button>
  </div>

  <script>
    document.getElementById("parent").addEventListener("click", function () {
      alert("Parent clicked");
    });

    document.getElementById("child").addEventListener("click", function (event) {
      alert("Child clicked");
      event.stopPropagation(); // 阻止事件冒泡
    });
  </script>
</body>
</html>