Schneller Tipp JavaScript-Ereignisdelegation in 4 Minuten

Die Delegation von Veranstaltungen kann für diejenigen, die mit dem Konzept nicht vertraut sind, ein verwirrendes Thema sein. Aber zum Glück ist es wirklich einfach. In diesem Kurztipp-Video-Tutorial werde ich das Konzept in knapp vier Minuten demonstrieren.

Geben Sie die Ereignisdelegation ein

Stattdessen fügen wir mit der Ereignisdelegierung einfach einen einzelnen Ereignis-Listener zu einem Vorfahrenelement hinzu, vielleicht etwas wie "ul". Wenn der Benutzer dann auf eines seiner untergeordneten Elemente wie ein Ankertag klickt, wird nur geprüft, ob das Ziel des Klicks tatsächlich ein Ankertag war. Wenn ja, gehen wir wie gewohnt vor.

$ ('ul'). click (Funktion (e) if ($ (e.target) .is ('a')) alert ('clicked'););

Vorteile

• Hängen Sie nur einen Ereignis-Listener an die Seite an, anstatt fünfhundert (in unserem Beispiel).
• Dynamisch erstellte Elemente sind weiterhin an den Ereignishandler gebunden.

Warum funktioniert das??

Es funktioniert aufgrund der Art und Weise, wie Elemente erfasst werden (nicht IE) und aufsprudeln. Betrachten Sie zum Beispiel die folgende einfache Struktur.

 
Anker
 

Wenn Sie auf das Ankertag klicken, klicken Sie auch auf das 'li' und das 'ul' und sogar das 'body'-Element. Dies wird als Sprudeln bezeichnet.

Hinweise zu diesem Screencast

Bitte beachten Sie, dass dies nur ein einfaches Beispiel ist, um die Funktionalität zu erklären. Wir haben jQuery verwendet, nur weil ich vier Minuten zum Aufnehmen hatte! In diesem speziellen Beispiel (sehen Sie sich den Screencast zuerst an) hätten wir zwei alternative Optionen verwenden können:

1. Übergeben Sie true als Parameter der clone () -Methode. Dies würde dann das Element sowie alle Event-Handler klonen.
2. Verwenden Sie stattdessen die live () -Methode. Seien Sie jedoch vorsichtig, wenn Sie diese Methode verwenden: Der Event-Handler wird X-mal neu hinzugefügt. Dies muss nicht unbedingt erforderlich sein.

Meist sollte dies die Idee demonstrieren. Mit normalem JavaScript können Sie Folgendes tun:

// Holen Sie sich eine ungeordnete Liste, die Ankertags enthält var ul = document.getElementById ('items'); // Schneller und einfacher Cross-Browser-Ereignishandler - zum Kompensieren der IE-Funktion attachEvent-Handler addEvent (obj, evt, fn, capture) if (window.attachEvent) obj.attachEvent ("on" + evt, fn);  else if (! capture) capture = falsch; // capture obj.addEventListener (evt, fn, capture) // Prüfen Sie, ob der angeklickte Knoten ein Ankertag ist. Wenn ja, fahren Sie wie gewohnt fort. addEvent (ul, "click", function (e) // Firefox und IE greifen unterschiedlich auf das Zielelement zu. e.target bzw. event.srcElement. var target = e? e.target: window.event.srcElement; if (target.nodeName.toLowerCase () === 'a') alert ("angeklickt"); false zurückgeben;;

• Folgen Sie uns auf Twitter oder abonnieren Sie den Nettuts + RSS-Feed für die besten Webentwicklungs-Tutorials im Web.