Ereignis in JavaScript sprudeln? Ereignisausbreitung erklärt-js-Tutorial-php.cn

Ereignis in JavaScript sprudeln? Ereignisausbreitung erklärt

Key Takeaways

Ereignis, das in JavaScript sprudelt, bezieht sich auf die Reihenfolge, in der Ereignishandler aufgerufen werden, wenn ein Element innerhalb eines zweiten Elements verschachtelt ist, und beide Elemente haben einen Hörer für das gleiche Ereignis registriert. Das Verständnis des Ereignisses sprudeln zusammen mit der Ereignisaufnahme und Ereignisverbreitung für die Arbeit mit Ereignissen in JavaScript.
Ereignisausbreitung ist ein Begriff für Ereignissprudeln und Ereigniserfassungen. Es bezieht sich auf den Prozess, alle Hörer für den angegebenen Ereignisart zu rufen, der an die Knoten am Zweig des DOM -Baumes angeschlossen ist. Die Ausbreitung ist bidirektional und kann in drei Phasen unterteilt werden: die Erfassungsphase, die Zielphase und die Blasenphase.
Ereignisausbreitung kann in jedem Hörer gestoppt werden, indem die StopPropagation -Methode des Ereignisobjekts aufgerufen wird. Dies stoppt die Ausbreitung, was bedeutet, dass alle Hörer auf den Knoten auf dem Ausbreitungspfad registriert sind, der dem aktuellen Ziel nicht aufgerufen wird.
Einige Ereignisse sind einer Standardaktion verbunden, die der Browser am Ende der Ausbreitung ausführt. Diese Standardaktion kann durch die Aufzeichnung der Ereignisstornierung vermieden werden, indem die Verhinderung in einem Hörer aufgerufen wird.

Ereignis Bubbling ist ein Begriff, den Sie auf Ihren JavaScript -Reisen möglicherweise begegnet haben. Es bezieht sich auf die Reihenfolge, in der Ereignishandler aufgerufen werden, wenn ein Element in einem zweiten Element verschachtelt ist, und beide Elemente haben einen Hörer für dasselbe Ereignis registriert (zum Beispiel ein Klick).

Aber das Ereignisblasen ist nur ein Stück Puzzleteil. Es wird oft in Verbindung mit der Ereigniserfassung und der Ereignisverbreitung erwähnt. Und ein festes Verständnis aller drei Konzepte ist für die Arbeit mit Ereignissen in JavaScript von wesentlicher Bedeutung - zum Beispiel, wenn Sie das Ereignisdelegationsmuster implementieren möchten.

In diesem Beitrag werde ich jeden dieser Begriffe erklären und zeigen, wie sie zusammenpassen. Ich werde Ihnen auch zeigen, wie ein grundlegendes Verständnis des JavaScript-Ereignisflusses Ihnen eine feinkörnige Kontrolle über Ihre Anwendung geben kann. Bitte beachten Sie, dass dies kein Grund für Ereignisse ist, daher wird eine Vertrautheit mit dem Thema angenommen. Wenn Sie mehr über Ereignisse im Allgemeinen erfahren möchten, lesen Sie unser Buch: JavaScript: Novice to Ninja.

Was ist die Ereignisausbreitung?

Beginnen wir mit der Ereignisausbreitung. Dies ist der pauschale Begriff für Ereignisse und Ereigniserfassungen. Betrachten Sie das typische Markup, um eine Liste mit verknüpften Bildern für eine Miniaturansichten zu erstellen, z. B.

<span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    ...
    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span><span><span><span></ul</span>></span>
</span>

Nach dem Login kopieren

Ein Klick auf ein Bild generiert nicht nur ein Klickereignis für das entsprechende IMG das Fensterobjekt.

In der DOM -Terminologie ist das Bild das Ereignisziel , das innerste Element, über das der Klick stammt. Das Ereignisziel sowie seine Vorfahren, von seinem Elternteil bis zum Fensterobjekt, bilden einen Zweig im Dom -Baum. In der Bildergalerie besteht beispielsweise dieser Zweig aus den Knoten: IMG, A, Li, UL, Body, HTML, Dokument, Fenster.

Beachten Sie, dass das Fenster nicht eigentlich ein DOM -Knoten ist, sondern die EventTarget -Schnittstelle implementiert. Daher handeln wir es so, als wäre es der übergeordnete Knoten des Dokumentobjekts.

Dieser Zweig ist wichtig, da er der Weg ist, an dem sich die Ereignisse ausbreiten (oder fließen). Diese Ausbreitung ist der Prozess, mit dem alle Hörer für den angegebenen Ereignistyp aufgerufen werden, der an die Knoten auf dem Zweig angeschlossen ist. Jeder Hörer wird mit einem Ereignisobjekt aufgerufen, das Informationen sammelt, die für das Ereignis relevant sind (dazu später mehr).

Denken Sie daran, dass mehrere Hörer für denselben Ereignisart auf einem Knoten registriert werden können. Wenn die Ausbreitung einen solchen Knoten erreicht, werden die Zuhörer in der Reihenfolge ihrer Registrierung aufgerufen.

Es sollte auch angemerkt werden, dass die Bestimmung der Zweige statisch ist, dh sie wird beim ersten Versand des Ereignisses festgelegt. Baumänderungen während der Ereignisverarbeitung werden ignoriert.

Die Ausbreitung ist bidirektional vom Fenster zum Ereignisziel und zurück. Diese Ausbreitung kann in drei Phasen unterteilt werden:

vom Fenster zum Ereignisziel -Elternteil: Dies ist die -Anfassungsphase
Das Ereignisziel selbst: Dies ist die Zielphase
vom Ereignisziel -Elternteil zurück zum Fenster: Die Blasenphase

Was diese Phasen unterscheidet, ist die Art von Zuhörern, die genannt werden.

Die Ereigniserfassungsphase

In dieser Phase werden nur die Capturer Zuhörer aufgerufen, nämlich diejenigen Hörer, die unter Verwendung eines Werts von TRUE für den dritten Parameter von AddEventListener registriert wurden:

<span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    ...
    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span><span><span><span></ul</span>></span>
</span>

Nach dem Login kopieren

Wenn dieser Parameter weggelassen wird, ist sein Standardwert falsch und der Hörer ist kein Kapitur.

In dieser Phase werden also nur die Kapiturer auf dem Pfad vom Fenster zum Ereignisziel -Elternteil aufgerufen.

Die Ereigniszielphase

In dieser Phase werden alle auf dem Ereignisziel registrierten Hörer aufgerufen, unabhängig vom Wert ihres Capture Flags.

Die Ereignissprudelphase

Während der Ereignisspurphase werden nur die Nichtkäufer aufgerufen. Das heißt

el<span>.addEventListener('click', listener, true)
</span>

Nach dem Login kopieren

Beachten Sie, dass alle Ereignisse, während alle Ereignisse mit der Erfassungsphase, Fokus, Blur, Last und einigen anderen auf das Ereignisziel fließen, nicht aufblasen. Das heißt, ihre Reise stoppt nach der

Ziel Phase.

Daher wurde am Ende der Ausbreitung jeder Hörer auf dem Zweig genau einmal genannt.

Event Bubbling findet nicht für jede Art von Veranstaltung statt. Während der Ausbreitung ist es für einen Hörer möglich zu wissen, ob ein Ereignis durch das Lesen der booleschen Eigenschaft des Ereignisobjekts bubbles.

Die drei Ereignisflussphasen sind im folgenden Diagramm aus der W3C -Uievents -Spezifikation dargestellt.

Ereignis in JavaScript sprudeln? Ereignisausbreitung erklärt

Zugriff auf Propagationsinformationen

Ich habe bereits die Eigenschaft. Es gibt eine Reihe anderer Eigenschaften, die von diesem Objekt bereitgestellt werden, die den Hörern zur Verfügung stehen, um auf Informationen zugreifen zu können.

e.Target verweist das Ereignisziel.
e.currentTarget ist der Knoten, auf dem der laufende Hörer registriert wurde. Dies ist der gleiche Wert des Listener -Aufrufkontexts, d. H. Der von diesem Schlüsselwort verwiesene Wert.
Wir können sogar die Stromphase mit E.Eventphase herausfinden. Es ist eine Ganzzahl, die sich auf eine der drei Ereigniskonstruktorkonstruktionen erfasst_phase, bubbling_phase und at_target.

in die Praxis umsetzen

Lassen Sie uns die oben genannten Konzepte in die Praxis ansehen. Im folgenden Stift befinden sich fünf verschachtelte Quadratkästen namens B0… B4. Anfangs ist nur die äußere Box B0 sichtbar; Die inneren zeigen, wenn der Mauszeiger über sie schwebt. Wenn wir auf ein Feld klicken, wird in der Tabelle rechts ein Protokoll des Ausbreitungsflusss angezeigt.

Siehe den Stift JMXDPZ von sitepoint (@sinepoint) auf CodePen.

Es ist sogar möglich, außerhalb der Felder zu klicken: In diesem Fall ist das Ereignisziel das Körper- oder HTML -Element, abhängig vom Speicherort auf dem Bildschirm.

Stop -Ausbreitung

Die Ereignisausbreitung kann in jedem Hörer gestoppt werden, indem die StopPropagation -Methode des Ereignisobjekts aufgerufen wird. Dies bedeutet, dass alle auf den Knoten auf dem Ausbreitungspfad registrierten Zuhörer, die dem aktuellen Ziel folgen, nicht aufgerufen werden. Stattdessen erhalten alle anderen am aktuellen Ziel angehängten verbleibenden Hörer das Ereignis weiter.

Wir können dieses Verhalten mit einer einfachen Gabel der vorherigen Demo überprüfen und nur einen Aufruf an StopPropagation () in einem der Zuhörer einfügen. Hier haben wir diesen neuen Hörer als Kapitur in der Liste der im Fenster registrierten Rückrufe vorbereitet:

<span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    ...
    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span><span><span><span></ul</span>></span>
</span>

Nach dem Login kopieren

Auf diese Weise bleibt die Ausbreitung frühzeitig angehalten und erreicht nur die Capturer -Hörer im Fenster.

Verbreitung der sofortigen Ausbreitung

Wie unter seinem Namen angegeben, verhindern StopimmediatePropagation die Bremsen sofort und verhindert, dass selbst die Geschwister des aktuellen Hörers das Ereignis erhalten. Wir können dies mit einer minimalen Änderung des letzten Stifts sehen:

<span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    ...
    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span><span><span><span></ul</span>></span>
</span>

Nach dem Login kopieren

Jetzt wird in der Protokolltabelle nichts ausgegeben, weder die C1- und C2 -Fensterkapiturer zählen, da die Ausbreitung nach der Ausführung des neuen Hörers aufhört.

Ereignisstornierung

Einige Ereignisse sind einer Standardaktion verbunden, die der Browser am Ende der Ausbreitung ausführt. Zum Beispiel führt das Klicken auf ein Link -Element oder das Klicken auf eine Schaltfläche "Auf eine Formulierung" bewirkt, dass der Browser zu einer neuen Seite navigiert oder das Formular sendet.

Es ist möglich, die Ausführung solcher Standardaktionen mit der Ereignisstornierung zu vermeiden, indem eine weitere Methode des Ereignisobjekts, E.PreventDefault, in einem Hörer aufgerufen wird.

Schlussfolgerung

Ich hoffe, dass ich Ihnen gezeigt habe, wie Ereignisse sprudeln und Ereignisse in JavaScript erfassen. Wenn Sie Fragen oder Kommentare haben, würde ich sie gerne in der folgenden Diskussion hören.

referenzen

DOCKEL -Objektmodell (DOM) Level 2 Ereignisspezifikation
W3C DOM4 - Ereignisse
Dom - Living Standard - Ereignisse
W3C UI -Ereignisse - DOM -Ereignisarchitektur
MSN - Ereignisse und Dom

Dieser Artikel wurde Peer von Yaphi Berhanu und Dominic Myers überprüft. Vielen Dank an alle Peer -Rezensenten von SitePoint, die SitePoint -Inhalte so gut wie möglich gemacht haben!

häufig gestellte Fragen (FAQs) zum Ereignis in JavaScript

Was ist der Hauptunterschied zwischen Ereignisblasen und Ereignisförderung? Elemente haben einen Handle für diese Veranstaltung registriert. Der Hauptunterschied liegt in Richtung der Ausbreitung des Ereignisses relativ zum Dom -Baum. Im Ereignis sprudelt das Ereignis zuerst das tiefste Zielelement und sprudelt dann zu seinen Eltern. Auf der anderen Seite beinhaltet das Ereigniserfasst das Ereignis, das auf das Zielelement geht, beginnend bei seinen Eltern. Sprudeln mit der StopPropagation () -Methode. Diese Methode verhindert eine weitere Ausbreitung des aktuellen Ereignisses in den Erfassungs- und sprudelnden Phasen. Hier ist ein Beispiel:

element.adDeVentListener ('Click', Funktion (Ereignis) {

Ereignis.StopPropagation ();

}); sprudeln nicht zu seinen übergeordneten Elementen. Wenn Sie beispielsweise ein übergeordnetes Element mit mehreren untergeordneten Elementen haben und auf ein bestimmtes Ereignis mit all diesen Elementen zuhören möchten, können Sie den Event -Hörer dem Elternteil aufstellen und das Ereignis sprudeln. Auf diese Weise sprudelt es beim Auslösen des Ereignisses auf den Kinderelementen zum Elternteil und Sie können es dort umgehen.

Kann ich gleichzeitig Ereignis sprudeln und erfassen? Dies ist als Event -Delegation bekannt. Es ist eine Technik, bei der Sie die Ereignisbehandlung an ein übergeordnetes Element delegieren, anstatt den Ereignishörer auf die einzelnen Kinderelemente zu setzen. Dies kann besonders nützlich sein, wenn Sie eine große Anzahl von untergeordneten Elementen haben. Dies bedeutet, dass die Ereignisse standardmäßig vom Zielelement ausgehen und sich bis zur Stammwurzel des Dokuments auswirken. Sie können dieses Verhalten jedoch ändern, indem Sie die Methode addEventListener () mit dem auf TRUE eingestellten Usecapture -Parameter verwenden, der die Ereigniserfassung ermöglicht. Ein Ereignis wird aus einem verschachtelten Element abgefeuert, das Ereignis wird sich durch die Vorfahren des verschachtelten Elements im Dom -Baum ausbreiten. Dies ist Ereignis sprudeln. Jeder Vorfahr hat wiederum die Möglichkeit, auf das Ereignis zu reagieren. Diese Ausbreitung wird fortgesetzt, bis sie die Wurzel des Dokuments erreicht oder bis StopPropagation () genannt wird. Standardaktion eines Ereignisses im Ereignis sprudeln mit der Methode PURDDEFAULT (). Diese Methode storniert das Ereignis, wenn es storniert werden kann, was bedeutet, dass die Standardaktion, die zum Ereignis gehört In JavaScript erfasst Phase, Zielphase und sprudelige Phase. Während der Erfassungsphase geht das Ereignis auf das Element zurück. In der Zielphase hat das Ereignis das Zielelement erreicht. Die sprudelnde Phase ist, wenn das Ereignis aus dem Element aufgeblasen wird.

Wie kann ich überprüfen, ob ein Ereignis sprudelt oder nicht? Bubbles Eigenschaft des Ereignisobjekts. Diese Eigenschaft gibt einen booleschen Wert zurück, der angibt, ob die Ereignis durch das DOM blüht oder nicht. ) Methoden werden verwendet, um die Ausbreitung des Ereignisses zu stoppen. Der Unterschied besteht darin, dass StopPropagation () das Ereignis daran hindert, die Ereigniskette aufzusprudeln, während StopimmediatePropagation () verhindert, dass andere Hörer desselben Ereignisses aufgerufen werden.

Das obige ist der detaillierte Inhalt vonEreignis in JavaScript sprudeln? Ereignisausbreitung erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!