Had peristiwa menggelegak: Bilakah menggelegak tidak boleh dilaksanakan?

Keterbatasan peristiwa menggelegak: Dalam keadaan apakah gelembung tidak boleh dicapai?

Dalam pembangunan bahagian hadapan, kami sering menggunakan acara menggelegak untuk mengendalikan acara elemen DOM. Walau bagaimanapun, kadangkala menggelegak bukanlah ubat mujarab, dan terdapat beberapa kes di mana menggelegak tidak dapat mencapai keperluan kita. Artikel ini akan membincangkan beberapa situasi yang tidak boleh menggelegak dan memberikan contoh kod khusus.

1. Cegah menggelegak
Biasanya, kami menggunakan kaedah Event.stopPropagation() untuk mengelakkan acara daripada menggelegak. Walau bagaimanapun, kadangkala mencegah menggelegak tidak mencapai kesan yang diingini. Event.stopPropagation()方法来阻止事件的冒泡。然而，有些时候阻止冒泡并不能达到我们想要的效果。

例如，假设我们有一个父元素和一个子元素，当点击子元素时，我们希望子元素的事件处理函数执行完后再执行父元素的事件处理函数。我们可能会尝试在子元素的事件处理函数中使用event.stopPropagation()

Sebagai contoh, katakan kita mempunyai elemen induk dan elemen anak Apabila elemen anak diklik, kita mahu fungsi pengendali peristiwa unsur anak dilaksanakan sebelum fungsi pengendali peristiwa unsur induk dilaksanakan. Kami mungkin cuba menggunakan event.stopPropagation() dalam pengendali acara elemen kanak-kanak untuk mengelakkan menggelegak:

<div id="parent">
  <div id="child"></div>
</div>

<script>
document.getElementById('child').addEventListener('click', function(event) {
  event.stopPropagation();
  console.log('子元素点击事件');
});

document.getElementById('parent').addEventListener('click', function() {
  console.log('父元素点击事件');
});
</script>

Walau bagaimanapun, kod di atas tidak boleh mencapai keperluan kami Mengklik pada elemen kanak-kanak hanya akan pengendali acara klik unsur anak dilaksanakan, tetapi pengendali acara klik unsur induk tidak dilaksanakan. Ini kerana mencegah menggelegak hanya akan menghalang acara daripada dihantar kepada elemen induk, tetapi ia tidak akan menyebabkan pengendali acara elemen induk dilaksanakan selepas pengendali acara elemen anak dilaksanakan.

2. Delegasi acara

Delegasi acara menggunakan prinsip menggelegak acara untuk mengikat acara dengan elemen induk dan mencetuskan fungsi pemprosesan yang sepadan dengan menilai sumber acara. Walau bagaimanapun, kadangkala terdapat had apabila menggunakan perwakilan acara.

Sebagai contoh, katakan kita mempunyai elemen ul yang mengandungi berbilang elemen li. Kami berharap apabila mana-mana elemen li diklik, kandungan teks elemen tersebut akan dikeluarkan. Kami mungkin cuba menggunakan delegasi acara untuk mencapai:

<ul id="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<script>
document.getElementById('list').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    console.log(event.target.textContent);
  }
});
</script>

Kod di atas boleh mencapai keperluan kami Selepas mengklik mana-mana elemen li, kandungan teks elemen akan dikeluarkan. Tetapi jika kita menambahkan teg pada elemen li, dan menggelegak dihalang apabila teg diklik, perwakilan acara tidak akan berfungsi dengan betul:

<ul id="list">
  <li>1 <a href="#" onclick="event.stopPropagation();">阻止冒泡</a></li>
  <li>2</li>
  <li>3</li>
</ul>

<script>
document.getElementById('list').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    console.log(event.target.textContent);
  }
});
</script>

Dalam kod di atas, apabila pautan "Cegah Bubbling" diklik, delegasi acara akan gagal dan tiada apa yang akan dikeluarkan. Ini kerana menghalang menggelegak menghalang acara daripada menggelegak ke elemen ul, jadi perwakilan acara tidak dapat mengesan sumber acara yang sepadan.

3. Pemprosesan acara tak segerak

Dalam sesetengah kes, kami mungkin perlu memproses acara secara tidak segerak, seperti membuat permintaan rangkaian atau melakukan operasi lain yang memakan masa. Walau bagaimanapun, mekanisme menggelegak tidak dapat memenuhi keperluan pemprosesan peristiwa tak segerak secara langsung.

Sebagai contoh, katakan kita mempunyai elemen butang Apabila butang diklik, kita perlu menghantar permintaan tak segerak untuk mendapatkan data, dan kemudian mengemas kini halaman berdasarkan data. Kami mungkin cuba melakukan operasi tak segerak dalam pengendali acara klik butang:

<button id="btn">点击</button>

<script>
document.getElementById('btn').addEventListener('click', function() {
  setTimeout(function() {
    console.log('异步操作完成');
  }, 1000);
});
</script>

Kod di atas akan mengeluarkan "Operasi tak segerak selesai" satu saat selepas butang diklik. Walau bagaimanapun, jika kami mempunyai pengendali acara klik pada elemen induk butang dan ingin melaksanakan pengendali acara selepas operasi tak segerak selesai, mekanisme menggelegak tidak dapat mencapai keperluan ini.

Ringkasnya, walaupun menggelegak adalah mekanisme yang sangat biasa dan berkuasa dalam pembangunan bahagian hadapan, ia juga mempunyai beberapa batasan dalam beberapa kes. Dalam kes ini, kita perlu mencari penyelesaian lain untuk memenuhi keperluan kita. 🎜

Atas ialah kandungan terperinci Had peristiwa menggelegak: Bilakah menggelegak tidak boleh dilaksanakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!