Die addEventListener () -Methode - Beispielcode für den JavaScript-Ereignis-Listener

Mit der JavaScript-Methode addEventListener () können Sie Funktionen einrichten, die aufgerufen werden, wenn ein bestimmtes Ereignis eintritt, z. B. wenn ein Benutzer auf eine Schaltfläche klickt. Dieses Tutorial zeigt Ihnen, wie Sie addEventListener () in Ihrem Code implementieren können.

Grundlegendes zu Ereignissen und Ereignishandlern

Ereignisse sind Aktionen, die auftreten, wenn der Benutzer oder Browser eine Seite bearbeitet. Sie spielen eine wichtige Rolle, da sie dazu führen können, dass sich Elemente einer Webseite dynamisch ändern.

Wenn der Browser beispielsweise das Laden eines Dokuments beendet hat, ist ein loadEreignis aufgetreten. Wenn ein Benutzer auf eine Schaltfläche auf einer Seite klickt, ist ein clickEreignis aufgetreten.

Viele Ereignisse können einmal, mehrmals oder nie auftreten. Möglicherweise wissen Sie auch nicht, wann ein Ereignis eintreten wird, insbesondere wenn es vom Benutzer generiert wurde.

In diesen Szenarien benötigen Sie einen Ereignishandler , um zu erkennen, wann ein Ereignis eintritt. Auf diese Weise können Sie Code einrichten, um auf Ereignisse zu reagieren, die im laufenden Betrieb auftreten.

JavaScript bietet einen Ereignishandler in Form der addEventListener()Methode. Dieser Handler kann an ein bestimmtes HTML-Element angehängt werden, für das Sie Ereignisse überwachen möchten, und an das Element können mehrere Handler angehängt sein.

addEventListener () Syntax

Hier ist die Syntax:

target.addEventListener(event, function, useCapture) 
  • Ziel : Das HTML-Element, zu dem Sie Ihren Ereignishandler hinzufügen möchten. Dieses Element ist Teil des Document Object Model (DOM), und Sie möchten möglicherweise erfahren, wie Sie ein DOM-Element auswählen.
  • Ereignis : Eine Zeichenfolge, die den Namen des Ereignisses angibt. Wir haben bereits erwähnt loadund clickEreignisse. Für Neugierige finden Sie hier eine vollständige Liste der HTML-DOM-Ereignisse.
  • Funktion : Gibt die Funktion an, die ausgeführt werden soll, wenn das Ereignis erkannt wird. Dies ist die Magie, mit der sich Ihre Webseiten dynamisch ändern können.
  • useCapture : Ein optionaler boolescher Wert (true oder false), der angibt, ob das Ereignis in der Erfassungs- oder Bubbling-Phase ausgeführt werden soll. Bei verschachtelten HTML-Elementen (z. B. imginnerhalb von a div) mit angehängten Ereignishandlern bestimmt dieser Wert, welches Ereignis zuerst ausgeführt wird. Standardmäßig ist es auf false gesetzt, was bedeutet, dass der innerste HTML-Ereignishandler zuerst ausgeführt wird (Bubbling-Phase).

addEventListener () Codebeispiel

Dies ist ein einfaches Beispiel, das ich gemacht habe und das Sie addEventListener()in Aktion zeigt .

Wenn ein Benutzer auf die Schaltfläche klickt, wird eine Meldung angezeigt. Ein weiterer Knopfklick verbirgt die Nachricht. Hier ist das relevante JavaScript:

let button = document.querySelector('#button'); let msg = document.querySelector('#message'); button.addEventListener('click', ()=>{ msg.classList.toggle('reveal'); }) 

Gehen Sie nach der zuvor gezeigten Syntax für addEventListener():

  • Ziel : HTML-Element mitid='button'
  • Funktion : Anonyme (Pfeil-) Funktion, die den Code einrichtet, der zum Anzeigen / Ausblenden der Nachricht erforderlich ist
  • useCapture : links vom Standardwert vonfalse

Meine Funktion kann die Nachricht anzeigen / ausblenden, indem sie eine CSS-Klasse namens "enthüllen" hinzufügt / entfernt, die die Sichtbarkeit des Nachrichtenelements ändert.

Natürlich können Sie diese Funktion in Ihrem Code anpassen. Sie können die anonyme Funktion auch durch eine eigene benannte Funktion ersetzen.

Ereignis als Parameter übergeben

Manchmal möchten wir vielleicht mehr Informationen über das Ereignis erfahren, z. B. welches Element angeklickt wurde. In dieser Situation müssen wir einen Ereignisparameter an unsere Funktion übergeben.

Dieses Beispiel zeigt, wie Sie die ID des Elements erhalten können:

button.addEventListener('click', (e)=>{ console.log(e.target.id) }) 

Hier ist der Ereignisparameter eine Variable mit dem Namen e, kann aber auch leicht als "Ereignis" bezeichnet werden. Dieser Parameter ist ein Objekt, das verschiedene Informationen zum Ereignis enthält, z. B. die Ziel-ID.

Sie müssen nichts Besonderes tun und JavaScript weiß automatisch, was zu tun ist, wenn Sie einen Parameter auf diese Weise an Ihre Funktion übergeben.

Ereignisbehandlungsroutinen entfernen

Wenn Sie aus irgendeinem Grund nicht möchten, dass ein Ereignishandler aktiviert wird, können Sie ihn folgendermaßen entfernen:

target.removeEventListener(event, function, useCapture); 

Die Parameter sind die gleichen wie addEventListener().

Übung macht den Meister

Der beste Weg, um mit Event-Handlern besser zu werden, besteht darin, mit Ihrem eigenen Code zu üben.

Hier ist ein Beispielprojekt, in dem ich Ereignishandler verwendet habe, um die Farbe, Größe und Geschwindigkeit von Blasen zu ändern, die über den Hintergrund einer Webseite fließen (Sie müssen auf das zentrale Bedienfeld klicken, um die Steuerelemente anzuzeigen).

Viel Spaß und mach etwas tolles!

Weitere Informationen zur anfängerfreundlichen Webentwicklung finden Sie in meinem Blog unter 1000 Mile World und folgen Sie mir auf Twitter.