suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung des DOM-Ereignisflusses_Grundkenntnisse

Detaillierte Erläuterung des DOM-Ereignisflusses_Grundkenntnisse

WBOY
WBOYOriginal
2016-05-16 16:18:581415Durchsuche

1. Sprudelnde Ereignisse

Browser-Ereignismodelle werden in zwei Typen unterteilt: Erfassungsereignisse und Bubbling-Ereignisse. Da der IE das Erfassen von Ereignissen nicht unterstützt, werden im Folgenden hauptsächlich Blasenereignisse als Erklärung verwendet.
(Bubbling genannt) Bubbling bedeutet, dass Ereignisse nacheinander vom spezifischsten Ereignis bis zum am wenigsten spezifischen Ereignis ausgelöst werden.

Code kopieren Der Code lautet wie folgt:


           

                ')"> click me


                                                                                     



Die oben genannten drei Funktionen fügen alle die Onclick-Funktion hinzu. Alle drei Funktionen werden zuerst ausgeführt, nachdem das einzelne p-Element ausgeführt wurde, dann das div und schließlich der body

Hier ist übrigens eine Erinnerung an das Erfassen von Ereignissen, deren Reihenfolge genau das Gegenteil von sprudelnden Ereignissen ist.

2. Ereignisüberwachung

Ein Ereignis erfordert eine Funktion, die normalerweise als Ereignishandler bezeichnet wird. Aus einer anderen Perspektive überwachen diese Funktionen, ob ein Ereignis in Echtzeit auftritt. Sie werden normalerweise als Ereignisüberwachungsfunktionen bezeichnet. Die Event-Listening-Funktion variiert stark zwischen verschiedenen Browsern.

i. Universelle Abhörmethoden, wie die Verwendung der Onclick-Methode, fast jeder Tag unterstützt diese Methode. Und die Browserkompatibilität ist sehr hoch

Berücksichtigung des Verhaltens, Trennung von Ereignissen.

Im Allgemeinen werden die folgenden Methoden zur Überwachung verwendet

Code kopieren Der Code lautet wie folgt:
click





Die beiden oben vorgestellten Methoden sind sehr praktisch und werden von Everbright-Entwicklern bei der Erstellung und Verarbeitung einiger kleiner Funktionen geliebt. Aber für die gleiche Veranstaltung. Sie können nur eine Funktion hinzufügen, z. B. die Onclick-Funktion der p-Markierung. Daher verfügt der IE über eine eigene Lösung.

ii.Listening-Methode im IE

In frühen IE-Browsern verfügt jedes Element über zwei Methoden zur Zeitüberwachung.

Sie sind attachmentEvent() bzw. detachEnevt().
Wie aus den Funktionsnamen hervorgeht, handelt es sich bei attachmentEnevt() um eine Funktion zum Hinzufügen einer Ereignisverarbeitung zu einem Element, während detachEvent() zum Löschen der Überwachungsfunktion für das Element verwendet wird. Ihre Syntax lautet wie folgt:

[object].attachEvent("enevt_handler","fnHandler");

[object].detachEvent("enevt_handler","fnHandler");

Unter diesen repräsentiert enevt_handler häufig verwendete Onclick, Onload, Onmouseover usw.
fnHandler ist der Name der Abhörfunktion.
Im Ereignis im vorherigen Abschnitt können Sie die Methode attachmentEvent() verwenden, anstatt eine Listening-Funktion hinzuzufügen. Wenn Sie einmal klicken, können Sie detachEvent() verwenden, um die Listening-Funktion zu löschen, sodass sie nach dem nächsten Klick nicht ausgeführt wird .

Code kopieren Der Code lautet wie folgt:






                                                                                                                                                                                                               



3. Standard-DOM-Ereignisüberwachung

Im Vergleich zu den beiden Methoden von dh verwendet das Standard-DOM auch zwei Methoden zum Hinzufügen bzw. Löschen von Abhörfunktionen. Das sind addEventListener() und removeEventListener()

Im Gegensatz zu IE akzeptieren diese beiden Funktionen 3 Parameter, nämlich den Namen des Ereignisses, den zuzuweisenden Funktionsnamen und ob es in der Bubbling-Phase oder der Capture-Phase verwendet wird. Die Parameter in der Erfassungsphase sind wahr und die Parameter in der Blasenphase sind falsch. Die Syntax lautet wie folgt:

Code kopieren

Der Code lautet wie folgt: [object].addEventListener("event_name",fnHandler,bCapture); [object].removeEventListener("event_name",fnHandler,bCapture);

Die Verwendung dieser beiden Funktionen ähnelt grundsätzlich der in Ie, aber bitte beachten Sie, dass die Namen von event_name „click“, „mouseover“ usw. lauten, statt „onclick“, „onmouseover“ in Ie.

Außerdem ist der dritte Parameter bCapture normalerweise auf „false“ eingestellt, d. h. die Bubbling-Stufe.
Standardmethode zum Abhören von DOM-Ereignissen:

Code kopieren

Der Code lautet wie folgt: