Abhören, Erfassen und Sprudeln von JavaScript-Ereignissen

In der Front-End-Entwicklung müssen wir häufig bestimmte Ereignisse überwachen. Auf diese Weise wird ein Rückruf ausgeführt, um verwandte Vorgänge auszuführen, solange das Ereignis für das angegebene Element ausgelöst wird.

Es gibt drei Methoden zum Abhören von Ereignissen in js:

element.addEventListener(type, listener[, useCapture]); // IE6~8 unterstützt nicht

element.attachEvent('on' + type, listener); // IE6~10, IE11 unterstützt nicht

element['on' + type] = function(){} // Alle Browser

Demo:

function cb() { console.log(1); }
element.addEventListener('click', cb, false);
element.attachEvent('onclick', cb);
element.onclick = cb;

Parameterbedeutung:

Typ: Ereignistyp

Listener: Rückruffunktion, nachdem das Ereignis ausgelöst wurde

useCapture: Gibt an, ob die Erfassung verwendet werden soll. Wenn der Wert wahr ist, gibt useCapture an, dass der Benutzer die Erfassung starten möchte. Nachdem die Erfassung initiiert wurde, wird der Ereignistyp, solange er im Dom-Unterbaum auftritt, zuerst vom Ereignis-Listener erfasst und dann an den Ereignis-Listener im Dom-Unterbaum weitergeleitet. Und Ereignisse, die in die Luft sprudeln, lösen keine Ereignis-Listener aus, die die Erfassung initiieren. Weitere Erläuterungen finden Sie in der Dokumentation zu DOM Level 3 Events. Der Standardwert von useCapture ist false.

addEventListener ist eine Methode zum Registrieren von Ereignis-Listenern, die zuvor von der W3C-Arbeitsgruppe in DOM Level 2 eingeführt wurde. Die traditionelle Ereignis-Listener-Methode bestand darin, sich über element['on' + type] zu registrieren. Der Hauptunterschied zwischen ihnen besteht darin, dass element[’on’ + type] keine Ereigniserfassung verwenden kann und element[’on’ + type] die Registrierung mehrerer Ereignis-Listener für dasselbe Ereignis auf demselben Element nicht unterstützt. Wie im Beispiel unten gezeigt, wird nach dem Klicken auf das Element nur 1 ausgegeben, nicht jedoch 0 und 1.

element.onclick = function(){ console.log(0); }
element.onclick = function(){ console.log(1); }

Die Methode addEventListener wird jedoch in IE6~8-Browsern nicht unterstützt . . Wie registrieren Sie also mehrere Ereignis-Listener für dasselbe Ereignis in niedrigeren Versionen des IE? Es stellt sich heraus, dass IE seit der IE5.0-Serie die Methode attachmentEvent() eingeführt hat, um diese Funktion zu unterstützen. Aber leider unterstützt auch diese Methode keine Ereigniserfassung. Und ab IE 11 ist diese Methode veraltet.

Sprechen Sie über das Erfassen und Sprudeln von Ereignissen

Die W3C-Spezifikation definiert drei Ereignisphasen in der Reihenfolge der Erfassungsphase , Zielphase, Blasenphase. Das Ereignisobjekt durchläuft diese Phasen der Reihe nach entsprechend dem Ausbreitungspfad in der Abbildung oben. Wenn eine Stufe nicht unterstützt wird oder die Weitergabe des Ereignisobjekts beendet wird, wird die Stufe übersprungen. Wenn beispielsweise die Event.bubbles-Eigenschaft auf „false“ gesetzt ist, wird die Bubbling-Phase übersprungen. Wenn Event.stopPropagation() aufgerufen wird, bevor das Ereignis ausgelöst wird, werden alle Phasen übersprungen.

Erfassungsphase: Bevor das Ereignisobjekt das Ereignisziel erreicht, muss das Ereignisobjekt vom Fenster über die Vorgängerknoten des Ziels an das Ereignisziel weitergegeben werden. Diese Phase wird als Capture-Phase bezeichnet. Zu diesem Zeitpunkt registrierte Ereignis-Listener müssen das Ereignis verarbeiten, bevor es sein Ziel erreicht.

Zielphase: Das Ereignisobjekt erreicht sein Ereignisziel. Diese Phase wird Zielphase genannt. Sobald das Ereignisobjekt das Ereignisziel erreicht, wird es in dieser Phase vom Ereignis-Listener verarbeitet. Wenn ein Ereignisobjekttyp als nicht sprudelnd markiert ist. Dann beendet das entsprechende Ereignisobjekt die Weitergabe, wenn es dieses Stadium erreicht.

Bubbling-Phase: Das Ereignisobjekt breitet sich vom Ereignisziel über seine Vorgängerknoten zum Fenster in einer zur Erfassungsphase entgegengesetzten Richtung aus. Dieses Stadium wird als Blasenstadium bezeichnet. Die zu diesem Zeitpunkt registrierten Ereignis-Listener verarbeiten die entsprechenden Bubbling-Ereignisse.

Nachdem ein Ereignis alle Phasen seines Ausbreitungspfads abgeschlossen hat, wird sein Event.currentTarget auf null und Event.eventPhase auf 0 gesetzt. Alle anderen Eigenschaften des Ereignisses ändern sich nicht (einschließlich der Event.target-Eigenschaft, die auf das Ereignisziel verweist)