jQuery addEventListener

Im heutigen Beitrag lernen wir die Funktion addEventListener in jQuery kennen.

AddEventListener in jQuery

JavaScript stellt die eingebaute Methode addEventListener() der EventTarget-Schnittstelle zur Verfügung. Diese Methode konfiguriert eine Funktion, die jedes Mal aufgerufen wird, wenn das angegebene Ereignis an das Ziel gesendet wird.

jQuery bietet eine äquivalente Methode namens .on(). Ähnlich wie die Methode addEventListener von JavaScript hängt die Methode .on eine Event-Handler-Funktion an die ausgewählten Elemente für ein oder mehrere Ereignisse an.

Syntax:

.on(events[, selector][, data], handler)

1. events ist ein String, der einen oder mehrere Event-Typen darstellt, getrennt durch Leerzeichen und optionale Namespaces, z. B. Click oder keydown.myPlugin.
2. Der selector stellt eine Auswahl-/Übereinstimmungszeichenfolge dar, um die Nachkommen der ausgewählten Elemente zu filtern, die das Ereignis auslösen. Wird der selector nicht übergeben oder null, wird das Event bei jedem Erreichen des ausgewählten Elements abgesetzt.
3. data werden an den Controller in event.data übergeben, wenn ein Ereignis ausgelöst wird.
4. handler ist eine Funktion, die ausgeführt wird, wenn das Ereignis ausgelöst wird. Wenn die Funktion handler null zurückgibt, ist als Abkürzung auch ein false-Wert erlaubt.

An die aktuell ausgewählten Elemente fügt die Methode .on() von jQuery Event-Handler an das Objekt an. Die Methode .on() bietet alle Funktionen zum Anhängen von Event-Handlern.

Für das Ereignisargument kann ein beliebiger Ereignisname verwendet werden. jQuery iteriert/schleift durch die Standard-JavaScript-Ereignistypen des Browsers und ruft die handler-Funktion auf, wenn der Browser aufgrund von Benutzeraktionen fehlschlägt, z. B. .click, was Ereignisse auslöst.

Die .trigger()-Technik kann auch Standard-Browser-Ereignisnamen und benutzerdefinierte Ereignisnamen veranlassen, verbundene Handler aufzurufen. Ereignisnamen müssen die besten alphanumerischen Zeichen, Unterstriche und Doppelpunkte enthalten.

Lassen Sie es uns anhand des folgenden einfachen Beispiels verstehen.

<button id="btn">Hello World!</button>

$('#btn').on('click', () => {console.log('Click event is fired.')})

Im obigen Codeausschnitt haben wir die Schaltfläche definiert. Sobald der Benutzer auf die Schaltfläche klickt, wird das Ereignis click ausgelöst und die Funktion handler aufgerufen.

Dies ähnelt der Methode .click(), die intern die Methode on('click') auslöst.

Versuchen Sie, das obige Code-Snippet in einem beliebigen Browser auszuführen, der jQuery unterstützt. Das folgende Ergebnis wird angezeigt.

"Click event is fired."

Demo