Mengapakah peristiwa menggelegak dicetuskan dua kali?

Mengapa peristiwa menggelegak dicetuskan dua kali?

Acara menggelegak bermaksud bahawa dalam DOM, apabila elemen mencetuskan acara (seperti acara klik), acara itu akan menggelegak daripada elemen ke elemen induk sehingga ia menggelembung ke atas ke objek dokumen. Acara menggelegak ialah sebahagian daripada model acara DOM, yang membolehkan pembangun mengikat pendengar acara kepada elemen induk, supaya apabila elemen anak mencetuskan peristiwa, peristiwa itu boleh ditangkap dan diproses melalui mekanisme menggelegak.

Walau bagaimanapun, kadangkala pembangun menghadapi situasi di mana peristiwa menggelembung dan mencetuskan dua kali, yang biasanya berlaku dalam elemen bersarang. Untuk lebih memahami sebab ia mencetuskan dua kali, mari lihat contoh kod tertentu.

Kod HTML adalah seperti berikut:

<div id="parent">
  <div id="child">
    <button id="button">点击我</button>
  </div>
</div>

Kod JavaScript adalah seperti berikut:

var parent = document.getElementById("parent");
var child = document.getElementById("child");
var button = document.getElementById("button");

parent.addEventListener("click", function(event) {
  console.log("父元素被点击");
});

child.addEventListener("click", function(event) {
  console.log("子元素被点击");
});

button.addEventListener("click", function(event) {
  console.log("按钮被点击");
  event.stopPropagation();
});

Dalam kod di atas, kami mempunyai elemen induk, elemen anak dan butang, masing-masing terikat pada pendengar acara klik. Apabila kami mengklik butang pada halaman web, acara akan dihantar daripada elemen anak kepada elemen induk mengikut peraturan menggelegak.

Sekarang, mari kita simulasi klik butang. Apabila kita mengklik butang, konsol akan mencetak output berikut:

按钮被点击
子元素被点击

Mengapa ia dicetuskan dua kali?

Ini kerana peristiwa menggelegak bermula dari elemen pencetus dan buih sehingga elemen induk mengikut urutan, dan dalam proses ini ia melalui dua lapisan elemen anak dan elemen induk. Apabila kita mengklik butang, peristiwa klik butang pertama kali dicetuskan dan "butang diklik" dicetak. Kemudian, acara itu terus menggelembung ke elemen kanak-kanak, mencetuskan peristiwa klik elemen kanak-kanak dan mencetak "elemen kanak-kanak telah diklik". Akhirnya, menggelegak diteruskan ke elemen induk, mencetuskan peristiwa klik elemen induk.

Jadi bagaimana untuk mengelakkan acara daripada menggelegak dan mencetuskan dua kali?

Kita boleh menghentikan acara daripada menggelegak dengan memanggil event.stopPropagation() dalam pengendali acara klik butang. Dalam kod di atas, kami telah menggunakan kaedah ini dalam acara klik butang. Apabila kita mengklik butang itu sekali lagi, konsol hanya akan mencetak "butang yang diklik" tanpa terus menggelembung ke elemen kanak-kanak dan ibu bapa. event.stopPropagation()来阻止事件继续冒泡。在上述代码中，我们已经在按钮的点击事件中使用了这个方法。当我们再次点击按钮时，控制台将只打印出"按钮被点击"，而不会继续冒泡至子元素和父元素。

总结来说，事件冒泡会触发两次的情况通常出现在嵌套元素中，当一个元素触发了某个事件时，事件会从触发元素开始向上冒泡至父元素，直到冒泡到最顶层的文档对象为止。然而，我们可以通过调用event.stopPropagation()

Ringkasnya, acara menggelegak dicetuskan dua kali biasanya dalam elemen bersarang Apabila elemen mencetuskan acara, acara akan menggelegak daripada elemen pencetus ke elemen induk sehingga ia menggelembung ke objek dokumen peringkat atas. Walau bagaimanapun, kita boleh menghalang acara daripada menggelegak dengan memanggil event.stopPropagation(), sekali gus menghalang acara daripada dicetuskan dua kali. 🎜

Atas ialah kandungan terperinci Mengapakah peristiwa menggelegak dicetuskan dua kali?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!