Mengapakah peristiwa menggelegak dicetuskan beberapa kali?

Mengapa peristiwa menggelegak dicetuskan dua kali?

Dalam pembangunan bahagian hadapan, kita sering menghadapi konsep acara menggelegak. Peristiwa menggelegak bermakna apabila peristiwa tertentu elemen dicetuskan pada halaman, peristiwa itu akan dihantar lapisan demi lapisan ke elemen atas sehingga akhirnya ia dihantar ke objek dokumen.

Namun, kadangkala kita mungkin menghadapi masalah acara menggelegak dan mencetuskan dua kali, walaupun kita hanya mengikat pendengar acara sekali. Jadi mengapa fenomena pencetus berulang berlaku? Mari selami kemungkinan sebab di bawah.

Pertama sekali, kita perlu menjelaskan konsep cara acara menggelegak berfungsi dalam penyemak imbas. Apabila penyemak imbas mencetuskan peristiwa tertentu pada elemen, ia akan melintasi pepohon DOM bermula dari elemen dan menyemak sama ada setiap elemen induk mempunyai pengendali acara yang terikat dengan acara tersebut. Jika pengendali acara ditemui, penyemak imbas melaksanakan pengendali dan meneruskan traversal sehingga ke objek dokumen. Proses ini adalah peristiwa menggelegak.

Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa peristiwa menggelegak bukan sahaja akan diturunkan kepada unsur induk, tetapi juga kepada unsur nenek moyang. Iaitu, peristiwa menggelegak berulang kali mencetuskan pengendali acara pada unsur induk dan nenek moyang. Ini boleh menyebabkan peristiwa itu dicetuskan dua kali.

Jadi persoalannya, mengapa peristiwa menggelegak berpindah kepada unsur nenek moyang? Ini kerana apabila mengikat pendengar acara, kami biasanya menggunakan perwakilan acara. Maksudnya, ikatkan pendengar acara kepada elemen induk, dan kemudian biarkan elemen induk mengendalikan acara dan bukannya elemen anak melalui acara menggelegak.

Jika pendengar acara yang kita ikat wujud pada kedua-dua elemen induk dan elemen moyang, peristiwa menggelegak akan dicetuskan dua kali. Ini kerana semasa penyemak imbas melintasi pepohon DOM, ia menyemak sama ada setiap elemen induk dan elemen nenek moyang mempunyai pengendali acara yang sama terikat padanya. Jika ada, penyemak imbas akan melaksanakannya.

Untuk lebih memahami masalah ini, contoh kod khusus disediakan di bawah:

Kod HTML:

<div id="parent">
  <div id="child">Click me!</div>
</div>

Kod JavaScript:

var parent = document.getElementById('parent');
var child = document.getElementById('child');

parent.addEventListener('click', function() {
  console.log('Parent Clicked!');
});

child.addEventListener('click', function() {
  console.log('Child Clicked!');
});

Dalam kod di atas, kami telah mengikat klik pada kedua-dua elemen induk dan elemen anak Pendengar acara untuk acara tersebut. Apabila kita mengklik pada elemen kanak-kanak, konsol akan mengeluarkan hasil dua kali: "Anak Diklik!" dan "Ibu Bapa Diklik!". Ini kerana peristiwa menggelegak dicetuskan dua kali, pertama pendengar acara unsur anak dilaksanakan, dan kemudian pendengar acara unsur induk dilaksanakan.

Untuk mengelakkan masalah gelembung acara dicetuskan dua kali, kita boleh menggunakan kaedah stopPropagation() untuk mengelakkan acara daripada terus menggelegak. Sebagai contoh, dalam kod di atas, kita boleh menambah baris kod dalam pendengar acara elemen kanak-kanak:

child.addEventListener('click', function(event) {
  console.log('Child Clicked!');
  event.stopPropagation();
});

Selepas menggunakan kaedah stopPropagation(), hanya pendengar acara elemen kanak-kanak akan dilaksanakan dan acara pendengar elemen induk tidak akan dilaksanakan lagi. Dengan cara ini, kita boleh mengelakkan masalah peristiwa menggelegak dan mencetuskan dua kali.

Untuk meringkaskan, sebab mengapa acara menggelegak dicetuskan dua kali adalah kerana acara menggelegak dihantar kepada pengendali acara pada elemen induk dan moyang. Untuk menyelesaikan masalah ini, kita boleh menggunakan kaedah stopPropagation() untuk mengelakkan acara daripada menggelegak ke atas.

Saya berharap melalui pengenalan artikel ini, pembaca dapat memahami dengan lebih komprehensif tentang prinsip acara menggelegak dan mengapa ia dicetuskan dua kali, serta dapat mencari penyelesaian yang berkesan apabila menghadapi masalah ini dalam pembangunan sebenar.

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