Acara menggelegak lwn. Menangkap: Bagaimanakah Penyebaran Acara Berfungsi dalam DOM?

Memahami Peristiwa menggelegak dan Menangkap

Dalam acara HTML DOM, apabila elemen dalam elemen lain mencetuskan peristiwa, acara itu boleh disebarkan melalui hierarki elemen. Bergantung pada mod penyebaran acara yang dipilih, susunan unsur menerima acara berubah.

Gelembung Peristiwa

Dengan menggelegak acara, acara pertama kali ditangkap dan dikendalikan oleh elemen paling dalam, mengembara "naik" melalui hierarki DOM. Akibatnya, elemen sasaran acara mengendalikan acara terlebih dahulu, diikuti oleh induknya, dan seterusnya.

Tangkapan Acara

Sebaliknya, dengan tangkapan acara, peristiwa pertama kali ditangkap oleh elemen paling luar dan merambat "ke bawah" melalui hierarki. Oleh itu, elemen akar mengendalikan acara sebelum elemen anaknya.

Memilih Bubbling vs. Capturing

Pilihan acara menggelegak atau menangkap bergantung pada gelagat pengendalian acara yang diingini .

• Gunakan bergelembung apabila acara sepatutnya dikendalikan oleh pelbagai elemen dan susunan pengendalian adalah tidak penting. Ia juga berguna untuk menugaskan pengendalian acara kepada elemen induk.
• Gunakan menangkap apabila perlu untuk campur tangan sebelum acara mencapai elemen sasaran. Ini selalunya digunakan untuk menghalang gelagat lalai atau untuk mengendalikan acara secara konsisten merentas jenis elemen yang berbeza.

Contoh

Dalam struktur HTML:

<div>

Jika peristiwa klik berlaku pada