Apa yang salah pada akhirnya? Terima kasih.
window.addEventListener('load', function() {
alert("All done");
}, false);
javascript
0x499602D2
sumber
sumber
Saya sudah cek MDN juga, tapi masih belum paham untuk apa
useCapture, jadi jawaban ini untuk mereka yang masih belum paham setelah cek dokumentasi resminya.Jadi pertama-tama, hal berikut terjadi di hampir semua browser:
yang berarti apa pun yang Anda setel
useCaptureke, kedua fase peristiwa ini selalu ada.Gambar ini menunjukkan cara kerjanya.
Kemudian muncul pertanyaan Anda. Parameter ke-3 yang dipanggil
useCapturemenunjukkan yang mana dari dua fase yang Anda inginkan untuk ditangani oleh penangan Anda.yang berarti jika Anda menulis kode seperti ini:
child.addEventListener("click", second); parent.addEventListener("click", first, true);ketika mengklik elemen anak,
firstmetode akan dipanggil sebelumnyasecond.Secara default,
useCaptureflag disetel ke false yang berarti penangan Anda hanya akan dipanggil selama fase gelembung peristiwa .Untuk info rinci, klik link referensi ini dan ini .
sumber
Jawaban @ Libra sangat bagus, kebetulan ada beberapa orang seperti saya yang lebih memahami interaksi kode dengan mesin.
Jadi skrip berikut harus menjelaskan propagasi acara. Apa yang saya coba lakukan berdasarkan skema deskripsi ini adalah:
Mengikuti aliran acara ke bawah dan ke atas hierarki berikut:
<window> <document> <body> <section> <div> <paragraph> <span>Demi kesederhanaan, kita akan mulai dari badan hingga ke elemen rentang yang mendaftarkan penangan untuk fase penangkapan, dan kembali ke elemen badan yang mendaftarkan penangan untuk fase menggelegak. Jadi hasilnya akan node demi node arah yang diambil oleh acara dari awal sampai akhir. Harap klik "Tampilkan konsol" di panel kanan cuplikan untuk mengakses log
function handler(e){ /* logs messages of each phase of the event flow associated with the actual node where the flow was passing by */ if ( e.eventPhase == Event.CAPTURING_PHASE ){ console.log ("capturing phase :\n actual node : "+this.nodeName); } if ( e.eventPhase == Event.AT_TARGET){ console.log( "at target phase :\n actual node : "+this.nodeName); } if ( e.eventPhase == Event.BUBBLING_PHASE){ console.log ("bubbling phase :\n actual node : "+this.nodeName ); } } /* The following array contains the elements between the target (span and you can click also on the paragraph) and its ancestors up to the BODY element, it can still go up to the "document" then the "window" element, for the sake of simplicity it is chosen to stop here at the body element */ arr=[document.body,document.getElementById("sectionID"), document.getElementById("DivId"),document.getElementById("PId"), document.getElementById("spanId")]; /* Then trying to register handelers for both capturing and bubbling phases */ function listener(node){ node.addEventListener( ev, handler, bool ) /* ev :event (click), handler : logging the event associated with the target, bool: capturing/bubbling phase */ } ev="click"; bool=true; // Capturing phase arr.forEach(listener); bool=false; // Bubbling phase /* Notice that both capturing and bubbling include the at_target phase, that's why you'll get two `at_target` phases in the log */ arr.forEach(listener);p { background: gray; color:white; padding: 10px; margin: 5px; border: thin solid black } span { background: white; color: black; padding: 2px; cursor: default; }<section ID="sectionID"> <div id="DivId"> <p id="PId"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis <span id="spanId">CLICK ME </span> imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosq. </p> </div> </section>Perhatikan bahwa peristiwa seperti fokus tidak menggelembung, yang tetap masuk akal karena sebagian besar peristiwa masih menggelembung.
sumber