Wir verwenden häufig JavaScript, um Interaktivität auf Webseiten zu erzeugen. Eine der häufigsten Methoden zur Behandlung von Ereignissen wie Mausklicks, Tastatureingaben und anderen ist die Verwendung der Methode addEventListener. Mit dieser Methode können wir Handlerfunktionen an bestimmte Ereignisse binden, die auf der Seite auftreten.
addEventListener hat mehrere Vorteile gegenüber anderen Methoden zur Ereignisbehandlung. Erstens ermöglicht es uns, mehrere Handler an dasselbe Ereignis zu binden, was eine größere Flexibilität und Benutzerfreundlichkeit in der Entwicklung mit sich bringt. Zweitens ermöglicht diese Methode es uns, Ereignishandler einfach zu entfernen, wenn sie nicht mehr benötigt werden.
Zu verwenden addEventListener wir müssen das spezifische Element angeben, auf dem wir die Ereignisse verfolgen möchten, und dann den Ereignistyp und die Handlerfunktion angeben. Die Handlerfunktion wird gestartet, wenn das angegebene Ereignis auf dem Element auftritt. Zum Beispiel können wir den folgenden Code verwenden:
In diesem Beispiel binden wir eine Handlerfunktion an ein Klickereignis für ein Element mit einer Variablen element. Wenn der Benutzer auf ein Element klickt, wird die Handlerfunktion aufgerufen und ausgeführt.
Hinzufügen eines Ereignis-Listeners zu einem Element
Wir können die addEventListener() -Methode verwenden, um Ereignisse auf einer Webseite zu behandeln. Mit dieser Methode können wir einem bestimmten Element einen Ereignis-Listener hinzufügen, um bestimmte Benutzeraktionen oder Änderungen am Element zu erfassen.
Die Syntax der addEventListener() -Methode lautet wie folgt:
element.addEventListener(event, function, useCapture);event: dies ist eine Zeichenfolge, die den Ereignistyp darstellt, dem ein Listener hinzugefügt werden soll. Zum Beispiel "click", "mouseover", "keyup" usw.
function: dies ist eine Funktion, die aufgerufen wird, wenn das angegebene Ereignis eintritt. Die Funktion kann bereits deklariert oder anonym sein.
useCapture: dies ist ein boolescher Wert, der bestimmt, ob der Listener in der Abfangphase des Ereignisses oder in der Aufstiegsphase ausgelöst werden soll. Normalerweise wird der Wert false verwendet, damit der Listener in der Aufstiegsphase ausgelöst wird, aber wir können auch den Wert true festlegen, damit der Listener in der Abfangphase ausgelöst wird.
Betrachten Sie ein Beispiel für die Verwendung der addEventListener() -Methode, um einem Button einen Listener für das click-Ereignis hinzuzufügen:
var button = document.querySelector("#myButton");button.addEventListener("click", function() );Im obigen Beispiel wählen wir ein Element mit der ID "myButton" aus und fügen einen Listener für das Ereignis "click" hinzu. Wenn der Benutzer auf eine Schaltfläche klickt, wird die Funktion innerhalb des Listeners aufgerufen und der angegebene Klick-Verarbeitungscode ausgeführt.
Mit der addEventListener() -Methode können wir die Ereignisverarbeitung in unserem Code flexibel anpassen und Listener abhängig von den Anforderungen der Anwendung einfach hinzufügen oder entfernen.
Auswählen des zu verarbeitenden Ereignistyps
Bei Verwendung der Methode addEventListener um Ereignisse zu verarbeiten, ist es wichtig, den richtigen Ereignistyp auszuwählen, mit dem Sie arbeiten möchten. Es gibt viele verschiedene Ereignistypen in HTML, und jeder kann in einem bestimmten Kontext nützlich sein.
Mausereignisse:
Mausereignisse wie click, mouseover und mouseout, kann verwendet werden, um auf Benutzeraktionen mit der Maus zu reagieren. Sie können beispielsweise ein Ereignis verwenden click um eine bestimmte Funktion aufzurufen, wenn Sie auf eine Schaltfläche oder einen Link klicken.
Tastaturereignisse:
Tastaturereignisse wie keydown und keyup, kann verwendet werden, um auf Tastatureingaben zu reagieren. Sie können beispielsweise ein Ereignis verwenden keydown um eine bestimmte Funktion zu starten, wenn Sie eine bestimmte Taste drücken, z. B. "Enter".
Formularereignisse:
Formularereignisse wie submit, kann verwendet werden, um bestimmte Aktionen auszuführen, wenn das Formular gesendet wird. Sie können beispielsweise ein Ereignis verwenden submit um die vom Benutzer eingegebenen Daten zu überprüfen, bevor das Formular an den Server gesendet wird.
Ladeereignisse:
Ladeereignisse wie load und DOMContentLoaded, kann verwendet werden, um bestimmte Aktionen auszuführen, nachdem eine Webseite oder Teile davon geladen wurden. Sie können beispielsweise ein Ereignis verwenden load um eine bestimmte Funktion zu starten, wenn alle Bilder auf der Seite vollständig geladen sind.
Es ist wichtig, den richtigen Ereignistyp auszuwählen, der mit dem übereinstimmt, was Sie bei der Verwendung von addEventListener erreichen möchten. Lesen Sie die Dokumentation zu den Ereignistypen durch und wählen Sie die für Ihren Fall am besten geeignete aus.
Verwenden einer Handlerfunktion zum Ausführen von Aktionen
Um eine Handlerfunktion zu verwenden, müssen Sie zuerst eine Funktion erstellen, die die erforderlichen Aktionen ausführt, wenn das Ereignis ausgelöst wird. Beispielsweise kann eine Funktion den Stil eines Elements ändern, Klassen hinzufügen oder entfernen, Daten an einen Server senden oder andere erforderliche Operationen ausführen.
Nachdem die Handlerfunktion definiert wurde, kann sie mit der addEventListener-Methode an ein Element gebunden werden. Als Argumente werden der Ereignisname und die Handlerfunktion selbst übergeben. Zum Beispiel:
Wenn Sie nun auf ein Element klicken, wird die Funktion myFunction aufgerufen und die erforderlichen Aktionen ausgeführt.
Es ist wichtig zu beachten, dass eine Handlerfunktion direkt innerhalb der addEventListener-Methode definiert werden kann, ohne eine separate Funktion zu erstellen. Dies kann nützlich sein, wenn der Handler nur an einer Stelle im Code benötigt wird und nicht anderswo verwendet wird. Zum Beispiel:
In diesem Fall ist der Name der Funktion nicht erforderlich, und der Handler wird direkt ausgeführt, wenn das Ereignis eintritt.
Mithilfe einer Handlerfunktion können Sie dynamisches Verhalten für Elemente auf einer Seite erstellen. Wenn Sie beispielsweise den Mauszeiger über ein Element bewegen, können Sie dessen Farbe ändern, wenn Sie darauf klicken, können Sie ein Popup-Fenster mit zusätzlichen Informationen öffnen oder Daten zum Speichern an den Server senden.
Darüber hinaus kann eine Handlerfunktion verwendet werden, um verschiedene Bedingungen zu überprüfen, bevor Aktionen ausgeführt werden. Wenn Sie beispielsweise auf eine Schaltfläche klicken, können Sie überprüfen, ob die erforderlichen Formularfelder ausgefüllt sind, und dann die Daten nur senden, wenn die Validierung erfolgreich ist.
Durch die Verwendung der Handlerfunktion zusammen mit dem addEventListener können Sie interaktive und reaktionsschnelle Webanwendungen erstellen, die auf Benutzeraktionen reagieren und die erforderlichen Aktionen ausführen können, um eine ordnungsgemäße Funktion und Benutzerfreundlichkeit zu gewährleisten.
Event-Parameter in der Handlerfunktion
Wenn wir einen Ereignishandler über den addEventListener hinzufügen, akzeptiert die Handlerfunktion einen event- Parameter. Dieser Parameter ist ein Objekt, das Informationen über das Ereignis enthält, das aufgetreten ist.
Der event-Parameter kann verwendet werden, um verschiedene Ereignisdaten abzurufen, z. B.:
- event.target - das Element, an dem das Ereignis aufgetreten ist;
- event.type - ereignistyp;
- event.clientX und event.clientY - die Koordinaten des Mauszeigers zum Zeitpunkt des Ereignisses;
- event.key - code der Taste, die gedrückt wurde;
- event.preventDefault() - verhindert die Standardaktion, die einem Ereignis zugeordnet ist;
- und viele andere.
Mit den event-Parametern können wir die erforderlichen Ereignisinformationen abrufen und bestimmte Aktionen in der Handlerfunktion ausführen. Sie können beispielsweise den Stil eines Elements ändern, Klassen hinzufügen oder entfernen, Daten an den Server senden usw.
Löschen eines Ereignis-Listeners
Um einen Ereignis-Listener zu entfernen, der mit der addEventListener() -Methode hinzugefügt wurde, müssen Sie die removeEventListener() -Methode verwenden. Mit dieser Methode können Sie den Listener entfernen, den Sie beim Hinzufügen angeben, um die Ereignisverarbeitung zu stoppen.
Die Syntax der removeEventListener() -Methode lautet wie folgt:
| removeEventListener(event, listener) | |
|---|---|
| event: | Eine Zeichenfolge, die den Ereignistyp angibt, für den der Listener gelöscht werden soll. |
| listener: | Eine Funktion, die als Ereignis-Listener hinzugefügt wurde und entfernt werden muss. |
Beispiel für die Verwendung der removeEventListener() -Methode zum Entfernen eines Listeners:
console.log("Auf ein Element klicken");
// Hinzufügen eines Ereignis-Listeners zu Elementen
// Ereignis-Listener löschen
Im obigen Beispiel wird zuerst die Listenerfunktion handleClick() erstellt, die beim Klicken auf das Element aufgerufen wird. Anschließend wird der Listener mit der addEventListener() -Methode dem Element mit der ID "myButton" hinzugefügt.
Um einen Ereignis-Listener zu entfernen, wird die removeEventListener() -Methode mit den gleichen Parametern wie beim Hinzufügen eines Listeners aufgerufen. In diesem Fall handelt es sich um den Ereignistyp "click" und den Namen der Listenerfunktion "handleClick".
Nach dem Ausführen der removeEventListener() -Methode wird der Listener entfernt und wird nicht mehr aufgerufen, wenn Sie auf das Element "myButton" klicken.
Verwenden von event delegation zur effizienten Ereignisbehandlung
Der Vorteil der Verwendung von event delegation besteht darin, dass Sie die Anzahl der Ereignishandler im Code reduzieren und die Komplexität der Verwaltung reduzieren können. Wenn Sie Elemente aus dem DOM einer Struktur hinzufügen oder entfernen, müssen Sie nicht jedes Mal Handler an neue Elemente binden oder sie aus den zu löschenden Elementen entfernen.
Eine der häufigsten Anwendungen von event Delegation ist die Verarbeitung von Klicks auf Listen- oder Tabellenelemente. Anstatt einen Handler an jedes Element in der Liste oder Tabellenzelle zu binden, können Sie einen Ereignishandler an das übergeordnete Element binden und mithilfe der Ereignisdelegierung das Element bestimmen, auf das geklickt wurde.
Beispielsweise können Sie mithilfe der Ereignisdelegierung auf Klicks auf Tabellenelemente reagieren:
| Zelle 1 |
| Zelle 2 |
| Zelle 3 |
const table = document.getElementById('myTable');
const target = event.target;
if (target.tagName === 'TD')
// Verarbeitung eines Klicks auf eine Tabellenzelle
In diesem Fall wird der Ereignishandler an das `table`-Element gebunden, und die Delegierung der Ereignisse erfolgt basierend auf der `event'-Validierung.target' auf Übereinstimmung mit dem gewünschten Element (in diesem Fall der Zelle `td`).
Die Verwendung von event delegation erleichtert die Ereignisbehandlung in Situationen, in denen es viele Ereigniselemente geben kann oder wenn Elemente dynamisch aus dem DOM hinzugefügt oder entfernt werden. Es hilft auch, Speicher- und Leistungsprobleme zu vermeiden, die mit der Bindung zu vieler Handler im Code verbunden sind.
Verwenden der preventDefault-Methode zum Rückgängig Machen des Standardverhaltens
Die Verwendung der preventDefault-Methode ist einfach genug. Zunächst muss das Ereignis als Parameter an die Handlerfunktion übergeben werden. Wenn Sie dann die preventDefault-Methode für dieses Ereignis aufrufen, können Sie das Standardverhalten rückgängig machen. Betrachten Sie beispielsweise das folgende Beispiel:
const link = document.querySelector('.link');link.addEventListener('click', function(event) ); In diesem Beispiel wählen wir ein Element mit der Klasse "link" aus und fügen ihm einen Click-Ereignis-Listener hinzu. Wenn der Benutzer auf einen Link klickt, wird eine Handlerfunktion aufgerufen, in der wir die preventDefault-Methode für das Ereignis aufrufen. Dadurch wird der Link abgebrochen und dem Benutzer wird ein Popup-Fenster mit einer Meldung angezeigt. Auf diese Weise können wir das Standardverhalten des Elements verhindern und unsere eigenen Aktionen ausführen.
Die preventDefault-Methode ist sehr nützlich, wenn Sie mit Formularen arbeiten. Zum Beispiel, um eingegebene Daten zu validieren oder ein Formular über eine asynchrone Anforderung zu senden. Dank dieser Methode können wir das Verhalten des Formulars kontrollieren und unerwünschte Aktionen verhindern.
Verwenden der stopPropagation-Methode zum Stoppen des Ereignisaufstiegs
Wenn ein Ereignis auf einem Element auftritt, wird es von den untergeordneten Elementen zu den übergeordneten Elementen angezeigt. Dies bedeutet, dass, wenn Sie verschachtelte Elemente haben und das Ereignis auf dem verschachtelten Element selbst auftritt, es an seine übergeordneten und übergeordneten übergeordneten Elemente übergeben wird und so weiter. Manchmal müssen Sie dieses Auftauchen jedoch verhindern und das Ereignis nur auf dem verschachtelten Element selbst behandeln.
Um die stopPropagation() -Methode zu verwenden, müssen Sie zuerst sicherstellen, dass Ihr Ereignishandler mit dem Element verbunden ist, an dem Sie das Upstream stoppen möchten, und nicht mit seinen übergeordneten Elementen.
Im Codebeispiel wird veranschaulicht, wie mit der stopPropagation() -Methode das Aufkommen eines Ereignisses beim Klicken auf eine Tabellenzeile gestoppt wird:
Строка 1 Строка 2 Строка 3
Die Verwendung der stopPropagation() -Methode ist ein leistungsfähiges Werkzeug zur Verwaltung der Ereignisbehandlung und ermöglicht es Ihnen, genau zu bestimmen, auf welche Elemente Aktionen für ein Ereignis angewendet werden.
| stopPropagation() | Stoppt das Auftauchen eines Ereignisses |
| addEventListener() | Verbindet einen Ereignishandler mit einem Element |
| event | Ereignisobjekt |
Verwenden der Ereignisdelegierung für dynamisch erstellte Elemente
Es gibt jedoch eine Lösung für dieses Problem - die Verwendung der Ereignisdelegierung. Indem wir einen Ereignishandler für das frühere (oder statische) übergeordnete Element erstellen, können wir auf Ereignisse für dynamisch erstellte Elemente warten, selbst wenn sie später im DOM erscheinen. Anstatt einen separaten Handler für jedes dynamische Element zu erstellen, können wir einen generalisierten Handler verwenden und bestimmen, welches Element das Ereignis ausgelöst hat.
Um die Ereignisdelegierung zu verwenden, müssen Sie zunächst das übergeordnete Element auswählen, auf dem die Ereignisse überwacht werden sollen. Fügen Sie dann mit der addEventListener-Methode einen Ereignishandler hinzu, indem Sie den Ereignistyp und die Handlerfunktion angeben.
Innerhalb der Handlerfunktion können wir ein Ereignisobjekt verwenden, um das Zielelement zu bestimmen, an dem das Ereignis aufgetreten ist. Sie können beispielsweise die target-Eigenschaft des Ereignisobjekts verwenden, um einen Verweis auf das Element abzurufen, das das Ereignis ausgelöst hat.
var parentElement = document.getElementById('parentElement');
var targetElement = event.target;
// Verwenden Sie das targetElement, um die erforderlichen Aktionen auszuführen
Nachdem das dynamisch erstellte Element nun dem übergeordneten Element hinzugefügt wurde, wird der Ereignishandler automatisch aufgerufen und wir können die erforderlichen Aktionen basierend auf dem Zielelement ausführen.
Mithilfe der Ereignisdelegierung können Sie den Code vereinfachen und vermeiden, dass Ereignishandler für jedes dynamische Element hinzugefügt werden müssen. Dies ist besonders nützlich, wenn wir eine große Anzahl von Elementen haben oder wenn Elemente dynamisch erscheinen und verschwinden können.
Anmerkung: Bei der Verwendung der Ereignisdelegierung müssen Sie auf die Leistung achten. Wenn viele Elemente auf einer Seite vorhanden sind, sind möglicherweise zu viele Ereignishandler vorhanden, was sich negativ auf die Leistung der Seite auswirken kann. In solchen Fällen wird empfohlen, den Delegierungsbereich auf das nächste statische übergeordnete Element zu beschränken.
Anwenden eines einzelnen Handlers auf mehrere Ereignisse
Um einen einzelnen Handler für mehrere Ereignisse anzuwenden, müssen Sie alle erforderlichen Ereignisse als zweites Argument der addEventListener-Funktion auflisten. Ereignisse werden durch ein Leerzeichen oder ein Komma aufgelistet.
Sie können beispielsweise einen Handler für die Ereignisse "click" und "mouseover" wie folgt festlegen:
element.addEventListener('click mouseover', handler);Auf diese Weise wird die Handler-Funktion sowohl aufgerufen, wenn Sie auf ein Element klicken als auch wenn Sie den Mauszeiger darüber bewegen.
Wenn Sie einen einzelnen Handler für mehrere Ereignisse verwenden, können Sie die Menge an Code reduzieren und Duplikate vermeiden. Dies ist besonders nützlich, wenn Handler ähnliche Aktionen ausführen oder eine gemeinsame Logik haben.
Sie sollten jedoch bei der Verwendung dieser Methode vorsichtig sein. Wenn der Handler je nach Ereignistyp unterschiedliche Vorgänge ausführen muss, müssen Sie den Ereignistyp innerhalb des Handlers überprüfen. Dies kann mit der event-Eigenschaft erfolgen.type oder verwenden Sie die event-Methode.target.übereinstimmt, um zu überprüfen, ob ein Ereignis mit einem bestimmten Selektor übereinstimmt.
Es ist auch wichtig, sich an die Ereignisumleitung zu erinnern und die event-Methoden zu verwenden.stopPropagation() und event.preventDefault(), wenn Sie die Weitergabe des Ereignisses anhalten und die Standardaktion abbrechen möchten.
