Acara menggelegak dan Menangkap - Belajar seperti anda 5

Ayuh, 'Belajar seperti anda berumur 5 tahun' hanyalah satu frasa — Saya tidak menceritakan kisah mainan di sini! Tetapi saya berjanji, jika anda membaca dengan teliti dari awal hingga akhir, semuanya akan masuk akal.

Peristiwa menggelegak dan menangkap ialah dua fasa cara peristiwa merambat (atau mengembara) melalui DOM (Model Objek Dokumen) apabila peristiwa dicetuskan dalam JavaScript. Sekarang, kenyataan ini memerlukan untuk mengosongkan konsep penyebaran acara.

Penyebaran Peristiwa

Apabila peristiwa berlaku pada elemen, seperti butang di dalam div, peristiwa itu bukan hanya berlaku pada butang itu. Acara bergerak melalui DOM dalam proses yang dikenali sebagai penyebaran acara. Proses ini berlaku dalam dua fasa utama:

• Merakam Acara (juga dipanggil "menipu")

• Acara menggelegak

Sekarang, saya harap anda mendapat idea itu. Mari fahami kedua-duanya dengan contoh.

Acara menggelegak

Peristiwa menggelegak bermakna apabila peristiwa berlaku pada elemen, ia mula-mula mencetuskan pengendali acara untuk elemen tersebut. Kemudian, ia bergerak ke atas dalam pepohon DOM untuk mencetuskan pengendali acara unsur induknya, dan seterusnya, sehingga ia mencapai dokumen atau punca pepohon DOM.

<div id="parent" style="padding: 20px; background-color: lightblue;">
  Parent Div
  <button id="child">Click Me!</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', function() {
    alert('Parent Div Clicked!');
  });

  document.getElementById('child').addEventListener('click', function(event) {
    alert('Button Clicked!');
    // event.stopPropagation(); // If you want to stop bubbling, uncomment this line
  });
</script>

Contoh Penjelasan: Apabila anda mengklik butang, "Butang Diklik!" amaran ditunjukkan dahulu kerana acara dicetuskan pada butang. Selepas itu, acara "berbuih" sehingga div induk dan anda melihat "Div Induk Diklik!" berjaga-jaga. Ini kerana acara bermula pada butang dan kemudian naik ke div induknya. Jadi, proses pembiakan ini dipanggil ‘Event Bubbling’.

Tangkapan Acara

Merakam acara adalah kebalikan daripada menggelegak. Acara bermula dari bahagian atas halaman web (bermula dengan dokumen) dan bergerak ke bawah ke arah elemen yang anda berinteraksi. Ini bermakna pengendali acara untuk elemen induk akan dicetuskan terlebih dahulu dan acara itu akan beralih ke elemen anak yang anda klik atau berinteraksi dengannya.

<div id="parent" style="padding: 20px; background-color: lightgreen;">
  Parent Div
  <button id="child">Click Me!</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', function() {
    alert('Parent Div Clicked!');
  }, true); // 'true' makes this event handler run during the capturing phase

  document.getElementById('child').addEventListener('click', function() {
    alert('Button Clicked!');
  });
</script>

Dalam kes ini, apabila anda mengklik butang, "Div Ibu Bapa Diklik!" amaran akan ditunjukkan terlebih dahulu. Kemudian, "Butang Diklik!" makluman akan ditunjukkan kerana acara bermula dari peringkat dokumen, menangkap (menitik) ke div induk dahulu, dan kemudian mencapai butang.

Nilai benar bagi argumen ketiga addEventListener ialah penentu fasa penangkapan.

Setiap Acara Melalui 3 Fasa

Sememangnya, setiap acara melalui ketiga-tiga fasa:

• Fasa menangkap: Acara bermula di bahagian atas (dokumen) dan turun ke sasaran.

• Fasa sasaran: Acara mencapai elemen yang anda berinteraksi dengan (sasaran).

• Fasa menggelegak: Selepas mencapai sasaran, acara menggelembung semula melalui elemen induk.

Jadi ya, sebuah peristiwa secara semula jadi bergerak melalui ketiga-tiga fasa, tetapi JavaScript memberi anda kawalan ke atas fasa mana pendengar acara anda akan bertindak.

Walaupun acara melalui ketiga-tiga fasa, pendengar acara JavaScript secara lalai dilampirkan pada fasa menggelegak. Ini bermakna apabila anda menambah pendengar acara tanpa menyatakan apa-apa, ia akan mendengar acara hanya dalam fasa menggelegak (selepas acara mencapai sasaran dan mula bergerak ke atas).

Apabila anda memberikan benar sebagai hujah ketiga, anda memberitahu JavaScript untuk mendengar acara semasa fasa tangkapan (semasa ia bergerak ke DOM). Acara masih melalui semua fasa (menangkap, menyasarkan dan menggelegak), tetapi pendengar akan dicetuskan semasa fasa menangkap, sebelum acara mencapai elemen sasaran.

Adakah acara itu bertukar daripada menangkap kepada menggelegak apabila anda menggunakan benar? Tidak, acara sentiasa bergerak melalui kedua-dua menangkap dan menggelegak. Apabila anda lulus benar, anda tidak menghalang fasa menggelegak. Anda hanya memberitahu pendengar untuk membalas semasa menangkap. Acara akan diteruskan dari menangkap ke sasaran dan kemudian menggelegak seperti biasa.

Ringkasan:

• Semua acara secara semula jadi melalui fasa penangkapan, sasaran dan menggelegak.

• Secara lalai, pendengar acara berfungsi semasa fasa menggelegak (selepas acara mencapai sasaran dan bergerak ke atas).

• Apabila anda lulus benar, anda memberitahu pendengar acara untuk mencetuskan semasa fasa menangkap (semasa acara bergerak ke bawah).

• Acara masih melalui semua fasa (menangkap, menyasarkan dan menggelegak), tetapi pendengar anda menentukan fasa mana untuk bertindak.

Atas ialah kandungan terperinci Acara menggelegak dan Menangkap - Belajar seperti anda 5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!