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

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

事件冒泡是 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>

上述代码创建了一个嵌套的 HTML 结构，其中包含一个最外层的 <div> 元素（id="outer"），一个嵌套在其中的 <code><div> 元素（id="inner"），以及一个按钮元素（id="button"）。<p>在这段代码中，我们为每个元素添加了点击事件监听器，用于输出对应元素被点击的信息。当我们在页面上点击按钮时，我们期望的输出结果是：</p><pre class='brush:php;toolbar:false;'>Button clicked Inner div clicked Outer div clicked</pre><p>然而，实际上的输出却是：</p><pre class='brush:php;toolbar:false;'>Button clicked Inner div clicked Outer div clicked Inner div clicked Outer div clicked</pre><p>可以看到，事件冒泡会连续发生两次，导致事件处理函数重复执行。</p> <p>这个问题的根本原因在于事件冒泡阶段的执行顺序。在冒泡阶段，事件会由最内层的元素开始向外层元素冒泡，然后再逐级执行父元素的事件处理函数。因此，当我们点击按钮时，点击事件会首先触发按钮的事件处理函数，然后冒泡到嵌套的 <code><div> 元素上，继续执行该元素的事件处理函数。但是，由于 <code><div> 元素还嵌套在最外层的 <code><div> 元素中，所以事件会再次冒泡到最外层的元素上，导致最外层的事件处理函数再次执行。<p>解决这个问题的方法可以有多种，下面我们来介绍两种常用的方式：</p> <ol><li>停止事件冒泡：</li></ol> <p>在事件处理函数中调用 <code>event.stopPropagation() 方法可以阻止事件的进一步传播，即停止事件冒泡。修改上述代码示例的按钮的事件处理函数如下：

document.getElementById('button').addEventListener('click', function(event) {
  console.log('Button clicked');
  event.stopPropagation(); // 阻止事件冒泡
});

使用 event.stopPropagation() 方法后，事件冒泡会在按钮元素上停止，不会再传播到嵌套的 <div> 元素和最外层的 <code><div> 元素上。因此，事件处理函数只会执行一次，输出的结果为：<pre class='brush:php;toolbar:false;'>Button clicked</pre><ol start="2"><li>监听捕获阶段：</li></ol> <p>除了事件冒泡阶段外，DOM 事件还有一个捕获阶段。捕获阶段是指事件从最外层的元素开始向内层元素传播的过程。利用捕获阶段，可以在最外层的元素上添加事件监听器，并在捕获阶段处理事件，然后再决定是否执行其他元素上的事件处理函数。修改上述代码示例的最外层 <code><div> 元素的事件处理函数如下：<pre class='brush:javascript;toolbar:false;'>document.getElementById('outer').addEventListener('click', function() { console.log('Outer div clicked'); }, true); // 添加 true 参数表示监听捕获阶段 </pre><p>通过在最外层元素上添加参数为 <code>true 的事件监听器，可以在捕获阶段执行事件处理函数。这样，在事件冒泡阶段，事件就不会再次触发最外层元素上的事件处理函数，从而避免了重复执行。

总结起来，事件冒泡会连续发生两次是因为事件在冒泡阶段会从最内层元素一直冒泡到最外层元素，并且会执行每个元素上的事件处理函数。为了解决这个问题，我们可以使用 event.stopPropagation() 方法阻止事件冒泡，或者通过监听捕获阶段处理事件避免重复执行。