Dlaczego po tej prostej funkcji addEventListener jest używane słowo „false”?

Question 1

Po co jest fałsz na końcu? Dzięki.

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

Question 2

Według MDN Web Docs trzeci parametr to:

useCapture
Jeśli true, useCapturewskazuje, że użytkownik chce zainicjować przechwytywanie. Po zainicjowaniu przechwytywania wszystkie zdarzenia określonego typu zostaną wysłane do zarejestrowanego listenerprzed wysłaniem do dowolnego EventTargets pod nim w drzewie DOM. Zdarzenia, które są propagowane w górę przez drzewo, nie wywołają odbiornika wyznaczonego do przechwytywania. Zobacz zdarzenia DOM Level 3, aby uzyskać szczegółowe wyjaśnienie.

Question 3

Sprawdziłem też MDN, ale nadal nie rozumiałem, do czego useCapturesłuży, więc ta odpowiedź jest dla tych, którzy nadal jej nie dostają po sprawdzeniu oficjalnej dokumentacji.

Przede wszystkim w prawie wszystkich przeglądarkach dzieje się co następuje:

We wszystkich przeglądarkach, z wyjątkiem IE <9, istnieją dwa etapy przetwarzania zdarzeń.

Wydarzenie najpierw przechodzi w dół - nazywane jest przechwytywaniem , a następnie rośnie . To zachowanie jest znormalizowane w specyfikacji W3C.

co oznacza, że bez względu na to, co ustawisz useCapture, te dwie fazy zdarzeń zawsze istnieją.

To zdjęcie pokazuje, jak to działa.

wprowadź opis obrazu tutaj

Zgodnie z tym modelem wydarzenie:

Przechwytuje od 1 do 2 -> 3.

Bąbelki w górę - przez 3 -> 2 -> 1.

Potem pojawia się twoje pytanie. Trzeci wywoływany parametr useCapturewskazuje, w której z dwóch faz ma obsługiwać zdarzenie.

useCapture = true

Przewodnik przechodzi do fazy przejmowania. Wydarzenia dotrą do niego, zanim dotrą do jego dzieci.

useCapture = false.

Przewodnik jest ustawiony w fazie bulgotania. Wydarzenia dotrą do niego po dotarciu do jego dzieci.

co oznacza, że jeśli napiszesz taki kod:

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

po kliknięciu elementu potomnego firstmetoda zostanie wywołana wcześniej second.

Domyślnie useCaptureflaga jest ustawiona na false, co oznacza, że program obsługi zostanie wywołany tylko podczas fazy propagacji zdarzeń .

Aby uzyskać szczegółowe informacje, kliknij to łącze referencyjne i to .

Question 4

@ Libra odpowiedź jest bardzo dobra, akurat są tacy ludzie jak ja, którzy lepiej rozumieją interakcję kodu z maszyną.
Zatem poniższy skrypt powinien wyjaśniać propagację zdarzenia. To, co próbuję zrobić na podstawie tego schematu opisu, to:
Następujące zdarzenia przepływają w dół iw górę w następującej hierarchii:

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

Ze względu na prostotę zaczniemy od korpusu, aż do elementu rozpiętego rejestrującego moduły obsługi dla fazy przechwytywania, a następnie z powrotem do elementów obsługi rejestrujących element ciała dla fazy propagacji. Wynik byłby więc węzłem po węźle, w kierunku, w jakim zdarzenie ma przebiegać od początku do końca. Aby uzyskać dostęp do dzienników, kliknij „Pokaż konsolę” w prawym panelu fragmentu kodu

    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>

Rozwiń fragment

Zauważ, że wydarzenia takie jak skupienie się nie bąbelkują, co sprawia, że nadal większość wydarzeń to bańki.