Was ist der Unterschied zwischen Ereignisblasen und Erfassen? Wann sollte man Bubbling vs Capturing verwenden?
javascript
dom-events
event-bubbling
Arun P Johny
quelle
quelle
Antworten:
Das Sprudeln und Erfassen von Ereignissen sind zwei Möglichkeiten der Ereignisweitergabe in der HTML-DOM-API, wenn ein Ereignis in einem Element in einem anderen Element auftritt und beide Elemente ein Handle für dieses Ereignis registriert haben. Der Ereignisausbreitungsmodus bestimmt, in welcher Reihenfolge die Elemente das Ereignis empfangen .
Beim Sprudeln wird das Ereignis zuerst vom innersten Element erfasst und verarbeitet und dann an die äußeren Elemente weitergegeben.
Bei der Erfassung wird das Ereignis zuerst vom äußersten Element erfasst und an die inneren Elemente weitergegeben.
Das Erfassen wird auch als "Rinnsal" bezeichnet, wodurch die Ausbreitungsreihenfolge gespeichert wird:
Früher befürwortete Netscape die Erfassung von Ereignissen, während Microsoft das Sprudeln von Ereignissen förderte. Beide sind Teil des W3C- Standards für Dokumentobjektmodellereignisse (2000).
IE <9 verwendet nur Ereignisblasen , während IE9 + und alle gängigen Browser beide unterstützen. Andererseits kann die Leistung des Ereignisblasens bei komplexen DOMs geringfügig geringer sein.
Wir können die verwenden
addEventListener(type, listener, useCapture)
, um Ereignishandler entweder im Bubbling-Modus (Standard) oder im Erfassungsmodus zu registrieren. Um das Erfassungsmodell zu verwenden, übergeben Sie das dritte Argument alstrue
.Beispiel
Nehmen Sie in der obigen Struktur an, dass im
li
Element ein Klickereignis aufgetreten ist.Beim Erfassen des Modells wird das Ereignis zuerst behandelt
div
(klicken Sie auf Ereignishandler imdiv
Testament wird zuerst ausgelöst ), dann imul
, dann zuletzt im Zielelementli
.Im Bubbling-Modell geschieht das Gegenteil: Das Ereignis wird zuerst vom
li
, dann vomul
und schließlich vomdiv
Element behandelt.Weitere Informationen finden Sie unter
Wenn Sie im folgenden Beispiel auf eines der hervorgehobenen Elemente klicken, sehen Sie, dass die Erfassungsphase des Ereignisausbreitungsflusses zuerst erfolgt, gefolgt von der Blasenphase.
Ein weiteres Beispiel bei JSFiddle .
quelle
useCapture
jetzt unterstützt in IE> = 9. Quelletriclkling
das gleiche wiecapturing
? Crockford spricht überTrickling v. Bubbling
in diesem Video talk - youtube.com/watch?v=Fv9qT9joc0M&list=PL7664379246A246CB um1 hr 5 minutes
.trickle down
=>onElement
=>bubble up
Beschreibung:
quirksmode.org hat eine schöne Beschreibung davon. Kurz gesagt (kopiert aus dem Quirksmode):
Was ist zu verwenden?
Es hängt davon ab, was Sie tun möchten. Besser geht es nicht. Der Unterschied ist die Reihenfolge der Ausführung der Ereignishandler. In den meisten Fällen ist es in Ordnung, Ereignishandler in der Blasenphase zu feuern , es kann jedoch auch erforderlich sein, sie früher zu feuern.
quelle
Wenn es zwei Elemente gibt, Element 1 und Element 2. Element 2 befindet sich innerhalb von Element 1 und wir fügen einen Ereignishandler mit beiden Elementen hinzu, sagen wir onClick. Wenn wir nun auf Element 2 klicken, wird eventHandler für beide Elemente ausgeführt. Hier stellt sich nun die Frage, in welcher Reihenfolge das Ereignis ausgeführt wird. Wenn das mit Element 1 verknüpfte Ereignis zuerst ausgeführt wird, wird es als Ereigniserfassung bezeichnet, und wenn das mit Element 2 verknüpfte Ereignis zuerst ausgeführt wird, wird dies als Ereignisblasenbildung bezeichnet. Gemäß W3C beginnt das Ereignis in der Erfassungsphase, bis es das Ziel erreicht, zum Element zurückkehrt und dann zu sprudeln beginnt
Die Erfassungs- und Blasenzustände sind dem Parameter useCapture der Methode addEventListener bekannt
Standardmäßig ist useCapture falsch. Es bedeutet, dass es sich in der Blasenphase befindet.
Bitte versuchen Sie es mit wahr und falsch.
quelle
the event will start in the capturing phase untill it reaches the target comes back to the element and then it starts bubbling
. Ich habe nur festgestellt, dass der addEventListener den Parameter hat, deruseCapture
auf true oder false gesetzt werden kann. und in HTML 4.0, Event - Listener wurden als Attribute eines Elements angegeben unduseCapture defaults to false
. Könnten Sie auf eine Spezifikation verweisen, die bestätigt, was Sie geschrieben haben?Ich habe festgestellt, dass dieses Tutorial unter javascript.info sehr klar ist, um dieses Thema zu erklären. Und die 3-Punkte-Zusammenfassung am Ende spricht wirklich die entscheidenden Punkte an. Ich zitiere es hier:
quelle
Es gibt auch die
Event.eventPhase
Eigenschaft, die Ihnen sagen kann, ob das Ereignis am Ziel ist oder von einem anderen Ort kommt.Beachten Sie, dass die Browserkompatibilität noch nicht festgelegt ist. Ich habe es auf Chrome (66.0.3359.181) und Firefox (59.0.3) getestet und es wird dort unterstützt.
Wenn Sie das bereits große Snippet aus der akzeptierten Antwort erweitern , ist dies die Ausgabe, die die
eventPhase
Eigenschaft verwendetquelle
Sprudeln
Erfassen
quelle