JavaScript冒泡|极客笔记

JavaScript冒泡

在JavaScript中，事件冒泡是指事件从最内层的元素开始向最外层元素逐级传播的过程。冒泡机制是JavaScript事件传播的一个重要特性，它使得事件可以在DOM树中上升，这样父元素可以处理由子元素触发的事件。

冒泡的原理

当一个事件被触发时，比如点击一个按钮，事件会从最内层的元素（目标元素）开始，然后逐级向父元素传播，直至传播到最外层元素（通常是<html>元素）。这种传播的过程就是事件的冒泡。

代码示例

下面是一个简单的示例，演示了事件冒泡的过程：

<!DOCTYPE html>
<html>
<head>
  <title>Event Bubbling Example</title>
</head>
<body>
  <div id="outer" style="background-color: lightblue; padding: 20px;">
    <div id="inner" style="background-color: lightcoral; padding: 20px;">
      <button id="btn">Click me</button>
    </div>
  </div>

  <script>
    document.getElementById("btn").addEventListener("click", function(event) {
      console.log("Button clicked");
      console.log("Target: " + event.target.id);
      console.log("Current Target: " + event.currentTarget.id);
    });

    document.getElementById("inner").addEventListener("click", function(event) {
      console.log("Inner div clicked");
      console.log("Target: " + event.target.id);
      console.log("Current Target: " + event.currentTarget.id);
    });

    document.getElementById("outer").addEventListener("click", function(event) {
      console.log("Outer div clicked");
      console.log("Target: " + event.target.id);
      console.log("Current Target: " + event.currentTarget.id);
    });
  </script>
</body>
</html>

在这个示例中，我们给三个元素分别添加了点击事件监听器，分别是<button>元素、内层<div>元素和外层<div>元素。当点击按钮时，会依次触发按钮、内层<div>和外层<div>的点击事件监听器。

运行结果

假设我们点击按钮，控制台会输出以下内容：

Button clicked
Target: btn
Current Target: btn
Inner div clicked
Target: btn
Current Target: inner
Outer div clicked
Target: btn
Current Target: outer

从输出中可以看出，事件是从最内层的目标元素开始向外层元素逐级传播的，直到最外层元素。

阻止冒泡

有时候我们希望阻止事件冒泡，可以使用event.stopPropagation()方法来实现。这样就可以阻止事件继续向外层元素传播，只执行当前元素的事件处理函数。示例如下：

<!DOCTYPE html>
<html>
<head>
  <title>Stop Event Bubbling Example</title>
</head>
<body>
  <div id="outer" style="background-color: lightblue; padding: 20px;">
    <div id="inner" style="background-color: lightcoral; padding: 20px;">
      <button id="btn">Click me</button>
    </div>
  </div>

  <script>
    document.getElementById("btn").addEventListener("click", function(event) {
      console.log("Button clicked");
      event.stopPropagation();
    });

    document.getElementById("inner").addEventListener("click", function(event) {
      console.log("Inner div clicked");
    });

    document.getElementById("outer").addEventListener("click", function(event) {
      console.log("Outer div clicked");
    });
  </script>
</body>
</html>

在这个示例中，点击按钮时，只会触发按钮的点击事件监听器，而不会触发内层<div>和外层<div>的点击事件监听器。