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

Dalam kod ini, kami menambah pendengar acara klik untuk setiap elemen untuk mengeluarkan maklumat tentang klik elemen yang sepadan. Apabila kita mengklik butang pada halaman, output yang kita jangkakan ialah: 🎜rrreee🎜 Walau bagaimanapun, output sebenar ialah: 🎜rrreee🎜 Seperti yang anda lihat, acara menggelegak akan berlaku dua kali berturut-turut, menyebabkan fungsi pemprosesan acara dilaksanakan berulang kali. 🎜🎜Punca masalah ini terletak pada susunan pelaksanaan fasa menggelegak acara. Dalam fasa menggelegak, acara akan menggelegak dari elemen paling dalam ke elemen luar, dan kemudian melaksanakan fungsi pengendali peristiwa elemen induk langkah demi langkah. Oleh itu, apabila kita mengklik butang, acara klik akan mula-mula mencetuskan pengendali acara butang, kemudian menggelembung ke elemen <div> bersarang dan terus melaksanakan pengendali acara elemen tersebut. Walau bagaimanapun, memandangkan elemen <div> juga bersarang dalam elemen <div> paling luar, acara akan menggelembung ke elemen paling luar sekali lagi, menyebabkan peristiwa paling luar fungsi pengendalian untuk dilaksanakan semula. 🎜🎜Terdapat banyak cara untuk menyelesaikan masalah ini Mari perkenalkan dua kaedah yang biasa digunakan: 🎜

1. Hentikan acara menggelegak:

🎜Panggil dalam fungsi pengendalian acaraacara. kaedah stopPropagation() boleh menghalang penyebaran peristiwa selanjutnya, iaitu, menghentikan acara menggelegak. Ubah suai fungsi pengendali acara butang dalam contoh kod di atas seperti berikut: 🎜rrreee🎜Selepas menggunakan kaedah event.stopPropagation(), acara menggelegak akan berhenti pada elemen butang dan tidak akan disebarkan lagi kepada elemen <div> bersarang dan elemen <div> paling luar. Oleh itu, fungsi pemprosesan acara hanya akan dilaksanakan sekali dan hasil output ialah: 🎜rrreee

2. Fasa tangkapan mendengar:

🎜Selain daripada menggelegak acara fasa, peristiwa DOM Terdapat juga fasa tangkapan. Fasa tangkapan merujuk kepada proses peristiwa yang merambat dari unsur terluar ke unsur dalam. Menggunakan fasa tangkapan, anda boleh menambah pendengar acara pada elemen paling luar, mengendalikan acara dalam fasa tangkapan, dan kemudian memutuskan sama ada untuk melaksanakan pengendali acara pada elemen lain. Ubah suai fungsi pengendali acara elemen <div> paling luar dalam contoh kod di atas seperti berikut: 🎜rrreee🎜Dengan menambahkan pendengar acara dengan parameter true pada bahagian paling luar elemen Pengendali acara boleh dilaksanakan semasa fasa tangkapan. Dengan cara ini, semasa peringkat menggelegak acara, acara tidak akan mencetuskan fungsi pemprosesan acara pada elemen paling luar sekali lagi, sekali gus mengelakkan pelaksanaan berulang. 🎜🎜Untuk meringkaskan, acara menggelegak akan berlaku dua kali berturut-turut kerana acara itu akan menggelegak dari elemen paling dalam ke elemen paling luar semasa fasa menggelegak, dan pengendali acara pada setiap elemen akan dilaksanakan. Untuk menyelesaikan masalah ini, kita boleh menggunakan kaedah event.stopPropagation() untuk menghalang acara daripada menggelegak atau memproses acara dengan mendengar fasa tangkapan untuk mengelakkan pelaksanaan berulang. 🎜