Mengapakah mekanisme menggelegak peristiwa mencetuskan dua kali?

Mengapa peristiwa menggelegak berlaku dua kali berturut-turut?

Acara menggelegak ialah konsep penting dalam pembangunan web Ini bermakna apabila sesuatu peristiwa dicetuskan dalam elemen HTML bersarang, acara itu akan menggelegak dari elemen paling dalam ke elemen paling luar. Proses ini kadangkala boleh menyebabkan kekeliruan Satu masalah biasa ialah peristiwa menggelegak berlaku dua kali berturut-turut.

Untuk lebih memahami mengapa peristiwa menggelegak berlaku dua kali berturut-turut, mari kita lihat contoh kod dahulu:

<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>

Kod di atas mencipta struktur HTML bersarang, yang mengandungi &lt ;div></code paling luar > elemen (id="outer"), elemen <code><div> bersarang di dalamnya (id="inner") dan elemen butang (id="butang"). <div> 元素（id="outer"），一个嵌套在其中的 <div> 元素（id="inner"），以及一个按钮元素（id="button"）。

在这段代码中，我们为每个元素添加了点击事件监听器，用于输出对应元素被点击的信息。当我们在页面上点击按钮时，我们期望的输出结果是：

Button clicked
Inner div clicked
Outer div clicked

然而，实际上的输出却是：

Button clicked
Inner div clicked
Outer div clicked
Inner div clicked
Outer div clicked

可以看到，事件冒泡会连续发生两次，导致事件处理函数重复执行。

这个问题的根本原因在于事件冒泡阶段的执行顺序。在冒泡阶段，事件会由最内层的元素开始向外层元素冒泡，然后再逐级执行父元素的事件处理函数。因此，当我们点击按钮时，点击事件会首先触发按钮的事件处理函数，然后冒泡到嵌套的 <div> 元素上，继续执行该元素的事件处理函数。但是，由于 <div> 元素还嵌套在最外层的 <div> 元素中，所以事件会再次冒泡到最外层的元素上，导致最外层的事件处理函数再次执行。

解决这个问题的方法可以有多种，下面我们来介绍两种常用的方式：

1. 停止事件冒泡：

在事件处理函数中调用 event.stopPropagation() 方法可以阻止事件的进一步传播，即停止事件冒泡。修改上述代码示例的按钮的事件处理函数如下：

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

使用 event.stopPropagation() 方法后，事件冒泡会在按钮元素上停止，不会再传播到嵌套的 <div> 元素和最外层的 <div> 元素上。因此，事件处理函数只会执行一次，输出的结果为：

Button clicked

2. 监听捕获阶段：

除了事件冒泡阶段外，DOM 事件还有一个捕获阶段。捕获阶段是指事件从最外层的元素开始向内层元素传播的过程。利用捕获阶段，可以在最外层的元素上添加事件监听器，并在捕获阶段处理事件，然后再决定是否执行其他元素上的事件处理函数。修改上述代码示例的最外层 <div> 元素的事件处理函数如下：

document.getElementById('outer').addEventListener('click', function() {
  console.log('Outer div clicked');
}, true); // 添加 true 参数表示监听捕获阶段

通过在最外层元素上添加参数为 true 的事件监听器，可以在捕获阶段执行事件处理函数。这样，在事件冒泡阶段，事件就不会再次触发最外层元素上的事件处理函数，从而避免了重复执行。

总结起来，事件冒泡会连续发生两次是因为事件在冒泡阶段会从最内层元素一直冒泡到最外层元素，并且会执行每个元素上的事件处理函数。为了解决这个问题，我们可以使用 event.stopPropagation()