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

elemen, perkara berikut berlaku:

• Mengeleh: li -> ul -> div
• Menangkap: div -> ul -> li

Nota:

• Tangkapan acara pernah disokong hanya oleh Netscape, manakala menggelegak lebih disukai oleh Microsoft. Hari ini, kedua-duanya diseragamkan oleh W3C.
• Acara menggelegak mungkin mempunyai sedikit prestasi overhed berbanding dengan menangkap untuk struktur DOM yang kompleks.
• Pengendali acara boleh didaftarkan sama ada untuk menggelegak atau menangkap menggunakan addEventListener kaedah dengan parameter useCapture pilihan.

Atas ialah kandungan terperinci Acara menggelegak lwn. Menangkap: Bagaimanakah Penyebaran Acara Berfungsi dalam DOM?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!