Acara Bubbling lwn. Menangkap: Bagaimanakah Mod Penyebaran Acara Mempengaruhi Pengendalian Acara DOM?

Acara menggelegak dan Menangkap: Memahami Penyebaran dalam DOM

Acara menggelegak dan menangkap acara memainkan peranan penting dalam penyebaran acara dalam HTML DOM API. Untuk memahami fungsinya, mari kita mendalami selok-belok kedua-dua konsep ini.

Event Bubbling vs. Event Capturing

Apabila peristiwa berlaku dalam elemen yang bersarang dalam elemen lain , dan kedua-dua elemen telah mendaftarkan pengendali acara untuk acara tertentu itu, mod penyebaran acara menentukan susunan elemen menerima acara.

• Acara menggelegak: Acara pada mulanya ditangkap dan dikendalikan oleh elemen paling dalam dan kemudian disebarkan ke luar kepada elemen induknya.
• Acara Menangkap: Acara ini mula-mula ditangkap oleh elemen paling luar dan disebarkan ke dalam ke sarangnya elemen.

Trickling vs. Bubbling

Menangkap juga dikenali sebagai "trickling," istilah yang membantu mengingati tertib penyebaran: "trickle down, bubble atas."

Pelayar Sokongan

• Netscape memperkenalkan penangkapan acara, manakala Microsoft memperjuangkan acara menggelegak.
• Piawaian Peristiwa Model Objek Dokumen W3C (2000) menggabungkan kedua-duanya.
• IE < ; 9 secara eksklusif menggunakan acara menggelegak, manakala IE9 dan penyemak imbas utama lain menyokong kedua-dua mekanisme.

Pertimbangan Prestasi

Acara menggelegak mungkin mempunyai prestasi yang lebih rendah sedikit dalam DOM kompleks berbanding kepada acara menangkap.

Penggunaan

Kami menggunakan kaedah addEventListener(jenis, pendengar, useCapture) untuk mendaftarkan pengendali acara sama ada dalam mod menggelegak (lalai) atau menangkap. Untuk menggunakan model penangkapan, hujah ketiga hendaklah ditetapkan kepada benar.

Contoh

Pertimbangkan struktur HTML berikut:

<div>
    <ul>
        <li></li>
    </ul>
</div>

Jika peristiwa klik berlaku dalam elemen li:

• Dalam mod tangkapan, acara dikendalikan oleh div, diikuti oleh ul, dan akhirnya li.
• Dalam mod menggelegak, acara mula-mula dikendalikan oleh li, kemudian oleh ul, dan terakhir oleh div.

Sumber Tambahan

• [Tempahan Acara pada QuirksMode](https://www.quirksmode.org/js/events_order.html)
• [addEventListener on MDN](https://developer.mozilla.org/en-US/docs/Web/API /EventTarget/addEventListener)
• [Acara Lanjutan pada QuirksMode](https://www.quirksmode.org/js/events/)

Demonstrasi Interaktif

Contoh interaktif berikut menggambarkan penangkapan dan menggelegak fasa penyebaran acara:

var logElement = document.getElementById('log');

function log(msg) {
    logElement.innerHTML += ('<p>' + msg + '</p>');
}

function capture() {
    log('capture: ' + this.firstChild.nodeValue.trim());
}

function bubble() {
    log('bubble: ' + this.firstChild.nodeValue.trim());
}

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
    divs[i].addEventListener('click', capture, true);
    divs[i].addEventListener('click', bubble, false);
}

Apabila mengklik mana-mana elemen yang diserlahkan, amati fasa menangkap peristiwa yang berlaku dahulu, diikuti dengan fasa menggelegak.

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