Ereignisbehandlung (Überblick)

Ereignisse sind in und/oder unter den Seiten für die JavaScript-Objekte dokumentiert, die sie auslösen. Um beispielsweise zu erfahren, welche Ereignisse im Browserfenster oder im aktuellen Dokument ausgelöst werden, siehe die Ereignisabschnitte in Window und Document.

Sie können das Ereignis-Referenz verwenden, um herauszufinden, welche JavaScript-Objekte Ereignisse für bestimmte APIs auslösen, z.B. Animation, Medien usw.

Es gibt zwei empfohlene Ansätze zur Registrierung von Handlern. Ereignishandler-Code kann so gemacht werden, dass er ausgeführt wird, wenn ein Ereignis ausgelöst wird, indem er der entsprechenden onevent-Eigenschaft des Zielelements zugewiesen wird oder indem der Handler als Listener für das Element mit der addEventListener()-Methode 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 mehrere Ereignishandler mithilfe der Event-Listener-Methoden hinzugefügt (oder entfernt) werden können.

Konventionell haben JavaScript-Objekte, die Ereignisse auslösen, entsprechende "Onevent"-Eigenschaften (benennt durch Voranstellen von "on" an den 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 von Ihrem eigenen Code aufgerufen werden.

Um Ereignishandler-Code festzulegen, können Sie ihn einfach der entsprechenden Onevent-Eigenschaft zuweisen. Nur ein Ereignishandler kann für jedes Ereignis in einem Element zugewiesen werden. Bei Bedarf kann der Handler durch Zuweisung einer anderen Funktion zu derselben Eigenschaft ersetzt werden.

Unten 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 Ereignishandler übergeben wird. Dieses Ereignisobjekt implementiert entweder die Event-Schnittstelle oder ist von ihr abgeleitet.

Der flexibelste Weg, um einen Ereignishandler für ein Element festzulegen, ist die Verwendung der EventTarget.addEventListener-Methode. Dieser Ansatz ermöglicht es, mehrere Listener zu einem Element hinzuzufügen und gegebenenfalls zu entfernen (mithilfe von EventTarget.removeEventListener).

Unten zeigen wir, wie eine greet()-Funktion als Listener/Ereignishandler für das click-Ereignis festgelegt werden kann (Sie können eine anonyme Funktionsausdruck anstelle einer benannten Funktion verwenden, falls gewünscht). Beachten Sie erneut, dass das Ereignis als erstes Argument an den Ereignishandler ü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 erhalten, um Aspekte der Erfassung und Entfernung von Ereignissen zu steuern. Weitere Informationen finden Sie auf der EventTarget.addEventListener-Referenzseite.

Verwendung eines Abbruchsignals

Eine bemerkenswerte Funktion von Event-Listenern ist die Fähigkeit, ein Abbruchsignal zu verwenden, um mehrere Ereignishandler gleichzeitig zu bereinigen.

Dies wird erreicht, indem das gleiche AbortSignal an den addEventListener()-Aufruf für alle Ereignishandler übergeben wird, die Sie zusammen entfernen möchten. Sie können dann abort() auf den Controller aufrufen, dem das AbortSignal gehört, und es wird alle Ereignishandler entfernen, die mit diesem Signal hinzugefügt wurden. Um beispielsweise einen Ereignishandler 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 Ereignishandler so entfernt werden:

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