Mengapa 'false' digunakan setelah fungsi addEventListener sederhana ini?

Question 1

Apa yang salah pada akhirnya? Terima kasih.

window.addEventListener('load', function() {
  alert("All done");
}, false);

Question 2

Menurut MDN Web Docs , parameter ketiga adalah:

useCapture
If true, useCapturemenunjukkan bahwa pengguna ingin memulai pengambilan. Setelah memulai penangkapan, semua kejadian dari jenis yang ditentukan akan dikirim ke terdaftar listenersebelum dikirim ke mana pun EventTargetdi bawahnya di pohon DOM. Peristiwa yang melonjak ke atas melalui pohon tidak akan memicu pendengar yang ditunjuk untuk menggunakan penangkapan. Lihat Peristiwa DOM Level 3 untuk penjelasan mendetail.

Question 3

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:

Di semua browser, kecuali IE <9, ada dua tahap pemrosesan acara.

Peristiwa pertama turun - itu disebut menangkap , dan kemudian menggelembung . Perilaku ini distandarkan dalam spesifikasi W3C.

yang berarti apa pun yang Anda setel useCaptureke, kedua fase peristiwa ini selalu ada.

Gambar ini menunjukkan cara kerjanya.

masukkan deskripsi gambar di sini

Menurut model ini, acara:

Menangkap turun - melalui 1 -> 2 -> 3.

Gelembung naik - melalui 3 -> 2 -> 1.

Kemudian muncul pertanyaan Anda. Parameter ke-3 yang dipanggil useCapturemenunjukkan yang mana dari dua fase yang Anda inginkan untuk ditangani oleh penangan Anda.

useCapture = true

Pawang disetel pada fase menangkap. Acara akan sampai ke sana sebelum sampai ke anak-anaknya.

useCapture = false.

Pawang disetel pada fase menggelegak. Acara akan diadakan setelah mendapatkan anak-anaknya.

yang berarti jika Anda menulis kode seperti ini:

child.addEventListener("click", second);
parent.addEventListener("click", first, true);

ketika mengklik elemen anak, firstmetode akan dipanggil sebelumnya second.

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 .

Question 4

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>

Luaskan cuplikan

Perhatikan bahwa peristiwa seperti fokus tidak menggelembung, yang tetap masuk akal karena sebagian besar peristiwa masih menggelembung.