为何事件冒泡机制会触发两次？

WEB前端
4月27日
编辑

站长知名站长

为什么事件冒泡会连续发生两次？

事件冒泡是 web 开发中一个重要的概念，它指的是当一个事件在嵌套的 HTML 元素中触发时，事件会从最内层的元素开始一直冒泡到最外层的元素。这个过程有时会引起困惑，其中一个常见问题就是事件冒泡会连续发生两次。

为了更好的理解为什么事件冒泡会连续发生两次，我们先来看一段代码示例：

<div id="outer">
  <div id="inner">
    <button id="button">Click me</button>
  </div>
</div>

<script>
document.getElementById(\'button\').addEventListener(\'click\', function() {
  console.log(\'Button clicked\');
});

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

document.getElementById(\'outer\').addEventListener(\'click\', function() {
  console.log(\'Outer div clicked\');
});
</script>

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。