Was ist die beste Art und Weise (am besten / am besten), um die Ereignisdelegierung in Vanilla js durchzuführen?
Zum Beispiel, wenn ich das in jQuery hatte:
%Vor% Wie kann ich das in Vanille js übersetzen? Vielleicht mit .addEventListener()
Ich kann mir folgendes vorstellen:
%Vor% Aber das scheint ineffizient, besonders wenn #main viele Kinder hat.
Ist das der richtige Weg, es dann zu tun?
%Vor% Ich habe eine einfache Lösung gefunden , die ziemlich gut funktioniert ( ältere IE-Unterstützung ungeachtet). Hier erweitern wir den Prototyp von EventTarget , um eine delegateEventListener -Methode bereitzustellen, die die folgende Syntax verwendet:
Ich habe eine ziemlich komplexe Geige erstellt, um sie in Aktion zu demonstrieren, wo wir delegieren alle Ereignisse für die grünen Elemente. Das Stoppen der Propagation funktioniert weiterhin und Sie können auf das zugreifen, was event.currentTarget bis this sein sollte (wie bei jQuery).
Hier ist die Lösung in vollem Umfang:
%Vor% Ich habe eine ähnliche Lösung, um eine Ereignisdelegierung zu erreichen.
Es nutzt die Array-Funktionen slice , reverse , filter und forEach .
slice konvertiert die NodeList von der Abfrage in ein Array, das ausgeführt werden muss, bevor die Liste umgekehrt werden darf. reverse invertiert das Array (so dass der letzte Traversierungsstart so nah wie möglich am Event-Ziel beginnt. filter überprüft, welche Elemente event.target enthalten. forEach ruft den bereitgestellten Handler für jedes Element aus dem gefilterten Ergebnis auf, solange der Handler false nicht zurückgibt. Die Funktion gibt die erstellte Delegate-Funktion zurück, die es ermöglicht, den Listener später zu entfernen.
Beachten Sie, dass das native event.stopPropagation() das Durchlaufen von validElements nicht stoppt, weil die Bubbling-Phase bereits das delegierende Element durchlaufen hat.
Obwohl es nicht empfohlen wird, native Prototypen zu erweitern, kann diese Funktion zum Prototyp für EventTarget (oder Node in IE) hinzugefügt werden. Ersetzen Sie dabei element durch this innerhalb der Funktion und entfernen Sie den entsprechenden Parameter ( EventTarget.prototype.delegateEventListener = function(eventType, childSelector, handler){...} ).
Tags und Links javascript