Aliran Acara: Berbuih & Menangkap

Ini adalah siaran #7 siri Soalan Temuduga Frontend. Jika anda ingin meningkatkan tahap persediaan anda atau kekal dikemas kini secara umum, pertimbangkan untuk menyertai Kem Frontend ?.

---

Peristiwa menggelegak dan menangkap, kedua-duanya adalah mekanisme penyebaran dalam DOM(Model Objek Dokumen). Kedua-dua mekanisme ini adalah bertentangan antara satu sama lain.

Acara menggelegak

Dalam peristiwa menggelegak, peristiwa, selepas mencetuskan pengendali pada elemen sasaran(event.target) merambat ke atas(gelembung) ke elemen akar dokumen. Dalam perjalanan ia mencetuskan semua pengendali acara pada elemen induk.

/*
<div>



<p>In the snippet above, when you click the button you'll see the following output in console:<br>
</p>

<pre class="brush:php;toolbar:false">"Button handler"
"Container handler"

Mula-mula pengendali pada butang dipanggil dan sifat event.target ditetapkan kepada butang semasa ia memulakan acara. Acara dalam perjalanan ke elemen akar, ia memanggil pengendali acara induknya.

Hampir semua acara menggelembung tetapi terdapat beberapa pengecualian seperti acara fokus yang tidak menggelembung.

Anda boleh berhenti menggelegak dengan memanggil kaedah stopPropagation() pada acara tersebut. Jika pengendali acara butang dalam coretan di atas menghentikan penyebaran, pengendali acara kontena tidak akan dipanggil.

btn.addEventListener('click', function(event) {
  console.log('Button handler!');

  // ancestor elements won't receive the event
  event.stopPropagation();
});

Anda boleh mengakses elemen yang memulakan acara dengan mengakses sifat target.event. Selain itu, elemen yang pengendalinya sedang dilaksanakan boleh diakses menggunakan event.currentTarget.

container.addEventListener('click', function(event) {
  console.log('Container handler!'); // 'Container handler!'
  console.log(event.target); // btn
  console.log(event.currentTarget); // container
  console.log(this); // container
});

Ingin mengetahui lebih lanjut tentang kata kunci ini? Saya menulis siaran padanya.

Tangkapan Acara

Kami hanya melihat separuh gambar sehingga sekarang. Apabila butang dalam coretan di atas diklik, ia bukan elemen pertama yang menerima acara itu. ?

Aliran acara terdiri daripada tiga fasa:

1. Fasa penangkapan: Peristiwa mengalir dari elemen akar ke elemen sasaran.
2. Fasa sasaran: Acara diterima pada elemen sasaran.
3. Fasa menggelegak: Acara mula merambat kembali ke elemen akar.

Secara lalai, semua pengendali acara hanya dipanggil semasa fasa sasaran dan menggelegak. Untuk memanggil pengendali acara dalam fasa menangkap, lulus benar sebagai argumen ketiga.

el.addEventListener('click', () => {}, true);
// or to be more explicit
el.addEventListener('click', () => {}, { capture: true });

Jika anda menggunakan pengendali dalam fasa menangkap, ia tidak akan dipanggil dalam fasa menggelegak.

Sama seperti menggelegak, apabila event.stopPropagation() dipanggil semasa fasa penangkapan, ia tidak akan membiarkan acara mengalir lebih jauh iaitu menuruni DOM, dalam kes ini.

Dalam coretan yang kita bincangkan sebelum ini, jika bekas menghentikan penyebaran semasa fasa menangkap, pengendali butang tidak akan dipanggil.

/*
<div>



<p>Inilah sebabnya anda harus sentiasa mempunyai alasan yang baik untuk menggunakan event.stopPropagation(). Ia boleh membawa kepada isu yang tidak dijangka yang sukar untuk dinyahpepijat dalam pokok DOM yang kompleks atau bersarang dalam.</p><p>Tangkapan acara jarang digunakan berbanding Bubbling. Bubbling mempunyai banyak kes penggunaan seperti "Delegasi acara" - corak prestasi yang penting.</p>

<p>Siaran ini meletakkan asas untuk topik seterusnya - Perwakilan acara. Pastikan anda memahaminya dengan baik. Ada keraguan? Tinggalkan mereka dalam komen. ✌️</p>


<hr>

<h2>
  
  
  Ringkasan
</h2>

<ol>
<li>Aliran acara terdiri daripada tiga fasa: Fasa Tangkap, Sasaran dan Bubbling.</li>
<li>Dalam fasa penangkapan, acara mengalir turun dari elemen akar ke elemen sasaran(event.target).</li>
<li>Dalam fasa menggelegak, peristiwa mengalir dari elemen sasaran ke elemen akar.</li>
<li>Secara lalai, semua pengendali acara dipanggil hanya semasa fasa sasaran dan menggelegak.</li>
<li>Dengan menghantar hujah ketiga dalam fungsi addEventListener, anda boleh menetapkan pengendali pada fasa menangkap.</li>
<li>Pada bila-bila masa dalam aliran acara, memanggil event.stopPropagation() akan menghentikan acara daripada mengalir lebih jauh.</li>
</ol>


<hr>

<p>Suka dengan apa yang baru anda baca? ? Pertimbangkan untuk menyertai senarai tunggu di Frontend Camp.</p>

<p>Tinggalkan beberapa reaksi "?" dan komen supaya siaran ini membantu pembangun lain seperti anda. ?</p>


          

            
  

            
        

Atas ialah kandungan terperinci Aliran Acara: Berbuih & Menangkap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!