Detaillierte Erläuterung von Ereignisströmen und Ereignishandlern in JavaScript

Ereignisfluss: Es gibt zwei Typen. Dh ist der Ereignisblasenfluss. Wenn das Ereignis beginnt, wird es vom spezifischsten Element empfangen und schritt Schritt für Schritt nach oben auf weniger spezifische Knoten (Element -> Dokument). Im Gegensatz dazu der Event Capture Stream von Netscape.

Ereignisse auf DOM2 -Ebene sehen vor, dass der Ereignisfluss drei Stufen umfasst: die Ereigniserfassungstufe, die Zielstufe und die Ereignisblasenstufe.

Meistens handelt es sich um die Blasenphase des Hinzufügens eines Ereignishandlers zum Ereignisstrom. Die Kastanie eines Eventilils:

 var eventUtil = {addHandler: function (element, type, Handler) {if (element.adDeVentListener) {element.adDeVentListener (Typ, Handler, Falsch); } else if (element.attachEvent) {element.attachEvent ('on' + type, Handler); // IE8} else {element ['on' + type] = Handler; }}, removeHandler: function () {...}}

Schauen wir es uns unten ausführlich an:

DOM0 -Ereignis -Handler der Ebene

Die traditionelle Art, Ereignishandler über JavaScript anzugeben, besteht darin, einem Ereignishandlerattribut eine Funktion zuzuweisen.

Jedes Element hat seine eigenen Ereignis -Handler -Attribute, die normalerweise alle Kleinbuchstaben sind, wie z. B. Onclick. Wenn Sie den Wert dieser Eigenschaft auf eine Funktion festlegen, können Sie den Ereignishandler angeben.

 var btn = document.getElementById ('myBtn'); // Ereignishandler btn.onclick = function () {alert (this); // ist ein DOM -Element Btn}; // Ereignisverträge btn.onclick = null;

Vorteile: 1. Einfach 2. Es hat die Vorteile von Cross-Browser

Nachteile: Ereignishandler werden nicht vor dem Ausführen des Codes angegeben. Daher befinden sich diese Codes hinter der Schaltfläche auf der Seite. Daher ist es möglich, dass nach einer Zeitspanne keine Antwort erhalten wird und die Benutzererfahrung schlechter wird.

DOM2 -Ereignis -Handler der Ebene

Zwei Methoden werden definiert, um Operationen zu verarbeiten, die Ereignishandler angeben und löschen: addEventListener () und removentListener (). Drei Parameter, 1. Der Name des zu verarbeitenden Ereignisses. 2. Funktion als Ereignishandler 3. Ein Booleaner Wert. Der letzte boolesche Wert ist wahr, was bedeutet, dass der Ereignishandler in der Capture -Phase aufgerufen wird, und falsch bedeutet der Ereignishandler in der Blasenbühne.

 // Mehrere Ereignishandler var btn = document.getElementById ('myBtn'); btn.removeEventListener ('click', function () {// anonyme Funktion kann nicht entfernt werden, Entfernung fehlgeschlagen}, false); // var Handler = function () {alert (this.id) neu schreiben; }; Btn.AdDeVentListener ('Click', Handler, False); // Entfernen Sie den Ereignishandler erneut btn.removeventListener ('Click', Handler, False); // erfolgreich entfernen

Diese beiden Event -Handler werden in der Reihenfolge entlassen, in der sie hinzugefügt werden. In den meisten Fällen werden Event -Handler in die sprudelnde Stufe des Ereignisstroms hinzugefügt, was mit verschiedenen Versionen des Browsers eine maximale Kompatibilität sein kann.

Vorteile: Ein Element kann mehrere Ereignishandler hinzufügen

Nachteile: IE8 und unterhalb der Browser unterstützen keine DOM2 -Ereignishandler. (Einschließlich IE8)

Dh Event -Handler

Zwei Methoden werden definiert, ähnlich wie oben: attoppent (), detachevent (). Diese beiden Methoden erhalten die gleichen zwei Parameter: den Ereignishandlernamen und die Ereignishandlerfunktion. Da IE8 und frühere Versionen nur Ereignisblasen unterstützen, werden Ereignishandler über detaachEvent () in die Blasenphase hinzugefügt.

 var btn = document.getElementById ('myBtn');

Klicken Sie auf die Schaltfläche, die Auslöserreihenfolge dieser beiden Ereignishandler ist genau das Gegenteil des oben genannten. Nicht ausgelöst in der Reihenfolge, in der Ereignishandler hinzugefügt werden, genau das Gegenteil.

Vorteile: Ein Element kann mehrere Ereignishandler hinzufügen

Nachteile: Nur unterstützen dh dh.

Cross-Browser-Event-Handler

z.B:

 var eventUtil = {addHandler: function (ele, type, Handler) {if (ele.addeventListener) {ele.addeventListener (Typ, Handler, Falsch); } else if (ele.attachEvent) {ele.attachEvent ('on' + Typ, Handler); } else {ele ['on' + type] = Handler}}, removeHandler: function (ele, type, Handler) {if (ele.removeEventListener) {ele.removeEventListener (Typ, Handler, Falsch); } else if (ele.detACHEvent) {ele.detACHEvent ('on' + Typ, Handler); } else {ele ['on' + type] = null; }}}