多个div的冒泡,代码示例

多个div的冒泡指的是当多个嵌套的div元素同时触发某个事件时，事件会从最内层的div开始向外层的div依次触发，直到最外层的div。这个过程就像气泡从底部向上冒泡一样，因此称为冒泡。

示例代码如下：

HTML部分：

<div id="outer" style="background-color: yellow;">
  <div id="middle" style="background-color: green;">
    <div id="inner" style="background-color: blue;">
      内层div
    </div>
  </div>
</div>

JavaScript部分：

document.getElementById("outer").addEventListener("click", function() {
  console.log("外层div被点击");
});
document.getElementById("middle").addEventListener("click", function() {
  console.log("中间div被点击");
});
document.getElementById("inner").addEventListener("click", function() {
  console.log("内层div被点击");
});

在上述示例中，有三个嵌套的div元素：外层div、中间div和内层div。每个div都绑定了一个点击事件监听器。当点击内层div时，控制台会依次输出"内层div被点击"、"中间div被点击"和"外层div被点击"。这是因为事件从内层div开始触发，然后冒泡到中间div，最后到达外层div。

这种冒泡机制使得我们可以在外层元素上监听事件，而不必为每个子元素都绑定事件监听器。这样可以提高代码的效率和可维护性。