Eine kurze Diskussion über gängige Methoden der JavaScript-Ereignisbindung und Analyse ihrer Vor- und Nachteile

Traditionelle Methode

element.onclick = function(e){
 
   // ...
 
 };

1. Vorteile der traditionellen Bindung

Sie ist sehr einfach und stabil und gewährleistet, dass sie funktioniert für Sie Funktioniert in verschiedenen Browsern gleich

Bei der Verarbeitung von Ereignissen bezieht sich das Schlüsselwort this auf das aktuelle Element, was sehr hilfreich ist

2 Nachteile der herkömmlichen Bindung

Das Die herkömmliche Methode wird nur beim Event-Bubbling ausgeführt, statt beim Erfassen und Bubbling.

Ein Element kann jeweils nur an einen Event-Handler gebunden sein. Die neu gebundene Event-Handler-Funktion überschreibt die alte Event-Handler-Funktion

Event-Objektparameter (e) ist nur für Nicht-IE-Browser verfügbar

W3C-Methode

element.addEventListener('click', function(e){
 
   // ...
 
 }, false);

1. Vorteile der W3C-Bindung

Diese Methode unterstützt sowohl die Erfassungs- als auch die Bubbling-Phase der Ereignisverarbeitung. Die Ereignisphase hängt von der letzten Parametereinstellung von addEventListener ab: false (Blase) oder true (Erfassung).

Im Ereignishandler verweist das Schlüsselwort this auf das aktuelle Element.

Ereignisobjekte können immer über das erste Argument (e) der Handlerfunktion erfasst werden.

Sie können mehrere gewünschte Ereignisse an dasselbe Element binden, ohne zuvor gebundene Ereignisse zu überschreiben

2. Nachteile der W3C-Bindung

IE unterstützt es nicht, Sie müssen IEs verwenden stattdessen die Funktion attachmentEvent verwenden.

IE-Methode

element.attachEvent('onclick', function(){
 
    // ...
 
  });

1. Vorteile der IE-Methode

Sie können dasselbe Element an dasselbe binden Element gleichzeitig, ohne zuvor gebundene Ereignisse zu überschreiben.

2. Nachteile der IE-Methode

IE unterstützt nur die Bubbling-Phase der Ereigniserfassung

Das Schlüsselwort this in der Ereignisüberwachungsfunktion verweist auf das Fensterobjekt, nicht auf das aktuelles Element (ein großes Manko des IE)

Das Ereignisobjekt existiert nur im window.event-Parameter

Das Ereignis muss in der Form ontype benannt werden, zum Beispiel onclick statt click

Nur ​​IE ist verfügbar. Sie müssen den addEventListener von W3C in Nicht-IE-Browsern verwenden

Dean Edwards' Lösung (addEvent/removeEvent-Bibliothek)

1. Die Vorteile von addEvent

können in allen Browsern genutzt werden Funktioniert auch mit älteren Browsern ohne jegliche Unterstützung

Dieses Schlüsselwort kann in allen Bindungsfunktionen verwendet werden und zeigt auf das aktuelle Element

neutralisiert alle Browser, die das Standardverhalten und verschiedene browserspezifische Funktionen verhindern Event-Bubbling verhindern

Unabhängig vom Browsertyp wird das Event-Objekt immer als erstes Objekt übergeben

2 Nachteile von addEvent

Funktioniert nur in der Bubbling-Phase (wie es nutzt stark die traditionelle Art der Ereignisbindung)