Mengapa kita perlu menghentikan acara daripada menggelegak

Mengapa kita perlu menghalang peristiwa menggelegak, kita memerlukan contoh kod khusus

Peristiwa menggelegak bermaksud bahawa selepas peristiwa dicetuskan, peristiwa itu akan merambat ke atas di sepanjang tahap pokok DOM sehingga ia mencapai nod akar. Mekanisme penyebaran ini membolehkan peristiwa dijawab oleh berbilang elemen pada masa yang sama, tetapi kadangkala kita hanya mahu bertindak balas kepada elemen tertentu, yang perlu dicapai dengan menghalang acara daripada menggelegak. Artikel ini akan membincangkan sebab kita perlu menghalang peristiwa daripada menggelegak dan memberikan beberapa contoh kod khusus.

Mula-mula, kita perlu memahami mengapa peristiwa timbul. Mekanisme menggelegak peristiwa mematuhi struktur pepohon DOM Apabila elemen mencetuskan peristiwa, jika peristiwa itu tidak dihalang daripada menggelegak, peristiwa itu akan dicetuskan terlebih dahulu pada elemen, dan kemudian pada elemen induknya, dan akan diluluskan. ke atas sehingga mencapai nod akar. Mekanisme ini membolehkan kami menggunakan pendengar acara pada berbilang elemen pada masa yang sama untuk mencapai pemprosesan acara bersatu. Pada masa yang sama, peristiwa menggelegak juga membolehkan peristiwa elemen bersarang dicetuskan dan dikendalikan dengan betul.

Walau bagaimanapun, acara menggelegak tidak diperlukan dalam semua kes. Kadangkala, kami hanya mahu peristiwa menyala pada elemen tertentu dan tidak disebarkan kepada elemen induknya atau elemen lain yang berkaitan. Ini memerlukan kami menggunakan kaedah yang disediakan oleh objek acara untuk mengelakkan acara daripada menggelegak.

Dalam JavaScript, kita boleh menghentikan acara menggelegak dengan memanggil kaedah stopPropagation() objek acara. Kaedah ini menghentikan penyebaran acara selanjutnya supaya acara hanya dicetuskan pada elemen semasa. Berikut ialah contoh kod khusus:

// HTML 代码
<div id="outer">
  <div id="inner">
    <button id="btn">点击我</button>
  </div>
</div>

// JavaScript 代码
const outer = document.getElementById("outer");
const inner = document.getElementById("inner");
const btn = document.getElementById("btn");

outer.addEventListener("click", function(event) {
  console.log("outer clicked");
});

inner.addEventListener("click", function(event) {
  console.log("inner clicked");
  event.stopPropagation();
});

btn.addEventListener("click", function(event) {
  console.log("button clicked");
});

Dalam contoh di atas, apabila kita mengklik butang, konsol akan mengeluarkan "butang diklik", "diklik dalam" dan "diklik luar" dalam urutan. Ini kerana apabila butang diklik, acara mula-mula menyala pada butang, kemudian pada elemen dalam, dan kemudian pada elemen luar. Dengan memanggil kaedah stopPropagation() objek acara, kami menghalang acara daripada merebak ke elemen luar, dengan itu mencetuskan acara hanya pada butang dan elemen dalam.

Selain itu, terdapat kaedah serupa yang dipanggil stopImmediatePropagation(), yang digunakan untuk menghalang penyebaran acara selanjutnya dan menghentikan pelaksanaan fungsi pengendalian acara lain pada elemen yang sama. Kaedah ini mungkin digunakan dalam beberapa kes khas, tetapi secara umum kaedah stopPropagation() adalah mencukupi untuk memenuhi keperluan kami.

Ringkasnya, sebab mengapa kita perlu menghalang acara daripada menggelegak adalah untuk mengelakkan peristiwa itu daripada mencetuskan elemen yang tidak perlu dan hanya mencetuskan elemen tertentu. Dengan memanggil kaedah stopPropagation() bagi objek acara, kami boleh menghalang acara daripada disebarkan dengan berkesan. Dalam pembangunan sebenar, kami perlu menggabungkan senario dan keperluan khusus untuk menentukan sama ada kaedah ini perlu digunakan untuk meningkatkan pengalaman pengguna dan kebolehselenggaraan kod.

Atas ialah kandungan terperinci Mengapa kita perlu menghentikan acara daripada menggelegak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!