Perché 'false' viene utilizzato dopo questa semplice funzione addEventListener?

Question 1

A cosa serve il falso alla fine? Grazie.

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

Question 2

Secondo MDN Web Docs , il terzo parametro è:

useCapture
If true, useCaptureindica che l'utente desidera avviare l'acquisizione. Dopo aver avviato l'acquisizione, tutti gli eventi del tipo specificato verranno inviati al registrato listenerprima di essere inviati a tutti EventTargeti messaggi sottostanti nell'albero DOM. Gli eventi che stanno ribollendo verso l'alto attraverso l'albero non attiveranno un ascoltatore designato per utilizzare la cattura. Vedere Eventi DOM Livello 3 per una spiegazione dettagliata.

Question 3

Ho controllato anche MDN, ma ancora non ho capito a cosa servisse useCapture, quindi questa risposta è per coloro che ancora non la ottengono dopo aver controllato la documentazione ufficiale.

Quindi, prima di tutto, accade quanto segue in quasi tutti i browser:

In tutti i browser, tranne IE <9, ci sono due fasi di elaborazione degli eventi.

L'evento prima si interrompe, si chiama acquisizione , quindi si gonfia . Questo comportamento è standardizzato nelle specifiche W3C.

il che significa che indipendentemente da cosa si imposta useCapture, queste due fasi dell'evento esistono sempre.

Questa immagine mostra come funziona.

inserisci qui la descrizione dell'immagine

Secondo questo modello, l'evento:

Cattura da giù a 1 -> 2 -> 3.

Bolle su - fino a 3 -> 2 -> 1.

Poi arriva la tua domanda. Il 3 ° parametro chiamato useCaptureindica su quale delle due fasi vuoi che il tuo gestore gestisca l'evento.

useCapture = true

Il gestore è impostato sulla fase di cattura. Gli eventi arriveranno prima di arrivare ai suoi figli.

useCapture = false.

Il conduttore è impostato sulla fase di bubbling. Gli eventi arriveranno dopo aver raggiunto i suoi figli.

il che significa che se scrivi codice come questo:

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

quando si fa clic sull'elemento figlio, il firstmetodo verrà chiamato prima second.

Per impostazione predefinita, il useCaptureflag è impostato su false, il che significa che il gestore verrà chiamato solo durante la fase di bubbling degli eventi .

Per informazioni dettagliate, fare clic su questo collegamento di riferimento e questo .

Question 4

@ La risposta di Libra è molto buona, capita che alcune persone come me capiscano meglio l'interazione del codice con la macchina.
Quindi il seguente script dovrebbe spiegare la propagazione dell'evento. Quello che sto cercando di fare in base a questo schema di descrizione è:
seguire il flusso degli eventi verso il basso e verso l'alto nella seguente gerarchia:

<window>
<document>
<body>
<section>
<div>
<paragraph>
<span>

Per semplicità inizieremo dal corpo fino all'elemento span che registra i gestori per la fase di cattura, e torneremo indietro fino all'elemento corpo che registra i gestori per la fase di bubbling. Quindi il risultato sarebbe nodo per nodo la direzione presa dall'evento dall'inizio alla fine. Fai clic su "Mostra console" nel pannello di destra dello snippet per accedere ai 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>

Espandi lo snippet

Si noti che eventi come il focus non fanno bolle, il che rende ancora sensato la maggior parte degli eventi.