Warum wird 'false' nach dieser einfachen Funktion addEventListener verwendet?

86

Wofür ist das Falsche am Ende? Vielen Dank.

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

Antworten:

12

Laut MDN Web Docs lautet der dritte Parameter:

useCapture
Wenn true, useCapturezeigt an, dass der Benutzer - Capture initiieren möchte. Nach dem Starten der Erfassung werden alle Ereignisse des angegebenen Typs an den registrierten listenergesendet, bevor sie an alle EventTargetdarunter liegenden im DOM-Baum gesendet werden. Ereignisse, die durch den Baum nach oben sprudeln, lösen keinen Listener aus, der für die Verwendung der Erfassung vorgesehen ist. Eine ausführliche Erläuterung finden Sie unter DOM Level 3-Ereignisse .

Lucas Jones
quelle
25
Ich weiß nicht so viel über Javascript, daher habe ich Probleme, diese Antwort zu bekommen. Ich weiß eigentlich nicht, was useCapture ist. Würdest du mir bitte etwas darüber erzählen?
Ashoka Mondal
1
@BikashChandraMondal Schauen Sie sich die Antwort unten an.
Waage
33
Bitte erklären Sie, nicht nur kopieren / einfügen.
Damjan Pavlica
2
Was für ein nutzloses Kopieren und Einfügen.
Sebastian Palma
315

Ich habe auch MDN überprüft, aber ich habe immer noch nicht verstanden, wofür das useCapturewar. Daher ist diese Antwort für diejenigen gedacht, die sie nach Überprüfung der offiziellen Dokumentation immer noch nicht erhalten.

Zuallererst passiert also in fast allen Browsern Folgendes:

In allen Browsern außer IE <9 gibt es zwei Stufen der Ereignisverarbeitung.

Das Ereignis geht zuerst aus - das nennt man Erfassen und sprudelt dann hoch . Dieses Verhalten ist in der W3C-Spezifikation standardisiert.

useCaptureDies bedeutet , dass diese beiden Ereignisphasen unabhängig von der Einstellung immer vorhanden sind.

Dieses Bild zeigt, wie es funktioniert.

Geben Sie hier die Bildbeschreibung ein

Nach diesem Modell ist die Veranstaltung:

Erfasst nach unten - bis 1 -> 2 -> 3.

Blasen hoch - durch 3 -> 2 -> 1.

Dann kommt deine Frage. Der dritte aufgerufene Parameter useCapturegibt an, in welcher der beiden Phasen Ihr Handler das Ereignis behandeln soll.

useCapture = true

Der Handler befindet sich in der Erfassungsphase. Ereignisse werden es erreichen, bevor es zu seinen Kindern kommt.

useCapture = false.

Der Handler befindet sich in der Blasenphase. Ereignisse werden es erreichen, nachdem sie seine Kinder erreicht haben.

Was bedeutet, wenn Sie Code wie folgt schreiben:

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

Wenn Sie auf das untergeordnete Element klicken, wird die firstMethode zuvor aufgerufen second.

Standardmäßig wird die useCapturewird Flag zu setzen falsch , dh Sie Handler wird nur während der Veranstaltung aufgerufen wird sprudelnde Phase.

Für detaillierte Informationen klicken Sie auf diesen Referenzlink und diesen .

Waage
quelle
13
Sehr schöne und umfassende Antwort. Ich verstehe es viel besser als jetzt.
0x499602D2
15
Sehr gute Erklärung. Die menschliche Berührung, das macht den Unterschied.
Rafael Eyng
1
Ich schätze diese Erklärung sehr.
neilsimp1
1
Gute Antwort. Können Sie auch erklären, welcher Ansatz wann verwendet werden sollte?
Rahul Arora
1
Dies muss die ausgewählte Antwort sein. OP können Sie das bitte tun?
Saurabh Tiwari
5

Die Antwort von @ Libra ist sehr gut, es gibt zufällig einige Leute wie mich, die die Interaktion des Codes mit der Maschine besser verstehen.
Das folgende Skript sollte daher die Ereignisausbreitung erläutern. Ich versuche anhand dieses Beschreibungsschemas
Folgendes zu tun : Nach dem Ereignisfluss wird die folgende Hierarchie nach unten und oben verschoben:

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

Der Einfachheit halber beginnen wir am Body bis zu den Span-Element-Registrierungshandlern für die Erfassungsphase und zurück zu den Body-Element-Registrierungshandlern für die Blasenphase. Das Ergebnis wäre also Knoten für Knoten die Richtung, in die das Ereignis vom Anfang bis zum Ende geht. Klicken Sie im rechten Bereich des Snippets auf "Konsole anzeigen", um auf die Protokolle zuzugreifen

    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>
Erweitern Sie das Snippet

Beachten Sie, dass Ereignisse wie der Fokus nicht sprudeln, was immer noch Sinn macht, dass die meisten Ereignisse sprudeln.

user10089632
quelle