Ereignisbehandlung (Überblick)

Ereignisse werden auf den Seiten der JavaScript-Objekte, die sie auslösen, dokumentiert. Um beispielsweise die Ereignisse zu finden, die auf dem Browserfenster oder dem aktuellen Dokument ausgelöst werden, siehe die Ereignisabschnitte in Window und Document.

Sie können das Ereignisverzeichnis verwenden, um herauszufinden, welche JavaScript-Objekte Ereignisse für bestimmte APIs auslösen, z. B. Animation, Medien und so weiter.

Es gibt zwei empfohlene Ansätze zum Registrieren von Handlern. Ereignis-Handler-Code kann so eingerichtet werden, dass er ausgeführt wird, wenn ein Ereignis ausgelöst wird, indem er der entsprechenden onevent-Eigenschaft des Ziel-Elements zugewiesen wird oder indem der Handler als Listener für das Element mit der Methode addEventListener() registriert wird. In beiden Fällen erhält der Handler ein Objekt, das der Event Schnittstelle (oder einer abgeleiteten Schnittstelle) entspricht. Der Hauptunterschied besteht darin, dass mit den Listener-Methoden mehrere Ereignis-Handler hinzugefügt (oder entfernt) werden können.

JavaScript-Objekte, die Ereignisse auslösen, haben konventionell entsprechende "onevent"-Eigenschaften (benannt durch das Präfix "on" vor dem Namen des Ereignisses). Diese Eigenschaften werden aufgerufen, um den zugehörigen Handler-Code auszuführen, wenn das Ereignis ausgelöst wird, und können auch direkt durch Ihren eigenen Code aufgerufen werden.

Um Ereignis-Handler-Code einzurichten, können Sie diesen einfach der entsprechenden Onevent-Eigenschaft zuweisen. Für jedes Ereignis in einem Element kann nur ein Ereignis-Handler zugewiesen werden. Falls erforderlich, kann der Handler durch Zuweisen einer anderen Funktion zu derselben Eigenschaft ersetzt werden.

Im Folgenden zeigen wir, wie eine greet()-Funktion für das click-Ereignis mit der onclick-Eigenschaft festgelegt wird.

const btn = document.querySelector("button");

function greet(event) {
  console.log("greet:", event);
}

btn.onclick = greet;

Beachten Sie, dass ein Objekt, das das Ereignis darstellt, als erstes Argument an den Ereignis-Handler übergeben wird. Dieses Ereignis-Objekt implementiert die Event Schnittstelle oder ist davon abgeleitet.

Der flexibelste Weg, einen Ereignis-Handler an einem Element festzulegen, ist die Verwendung der Methode EventTarget.addEventListener. Dieser Ansatz ermöglicht es, mehrere Listener an ein Element zu binden und diese bei Bedarf zu entfernen (mithilfe von EventTarget.removeEventListener).

Nachfolgend zeigen wir, wie eine greet()-Funktion als Listener/Ereignis-Handler für das click-Ereignis festgelegt werden kann (Sie könnten stattdessen einen anonymen Funktionsausdruck anstelle einer benannten Funktion verwenden, falls gewünscht). Beachten Sie erneut, dass das Ereignis als erstes Argument an den Ereignis-Handler übergeben wird.

const btn = document.querySelector("button");

function greet(event) {
  console.log("greet:", event);
}

btn.addEventListener("click", greet);

Die Methode kann auch zusätzliche Argumente/Optionen annehmen, um Aspekte zu steuern, wie die Ereignisse erfasst und entfernt werden. Weitere Informationen finden Sie auf der Referenzseite zu EventTarget.addEventListener.

Verwendung eines Abbruchsignals

Ein bemerkenswertes Merkmal von Ereignis-Listenern ist die Fähigkeit, ein Abbruchsignal zu verwenden, um mehrere Ereignis-Handler gleichzeitig zu bereinigen.

Dies geschieht, indem dasselbe AbortSignal an den Aufruf von addEventListener() für alle Ereignis-Handler übergeben wird, die zusammen entfernt werden sollen. Sie können dann abort() auf dem Controller aufrufen, dem das AbortSignal gehört, und es entfernt alle Ereignis-Handler, die mit diesem Signal hinzugefügt wurden. Zum Beispiel, um einen Ereignis-Handler hinzuzufügen, den wir mit einem AbortSignal entfernen können:

const controller = new AbortController();

btn.addEventListener(
  "click",
  (event) => {
    console.log("greet:", event);
  },
  { signal: controller.signal },
); // pass an AbortSignal to this handler

Dann kann der durch den obigen Code erstellte Ereignis-Handler so entfernt werden:

controller.abort(); // removes any/all event handlers associated with this controller