Event handling (overview)

Ereignisse sind auf den Seiten zu den JavaScript-Objekten dokumentiert, die sie auslösen. Um beispielsweise die auf dem Browserfenster oder dem aktuellen Dokument ausgelösten Ereignisse zu finden, sehen Sie sich die Abschnitt zu Ereignissen in Window und Document an.

Sie können die Ereignisreferenz verwenden, um herauszufinden, welche JavaScript-Objekte Ereignisse für bestimmte APIs auslösen, z. B. Animation, Media usw.

Es gibt zwei empfohlene Ansätze, um Handler zu registrieren. Der Ereignishandler-Code kann so ausgeführt 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 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 Ereignis-Listener-Methoden mehrere Ereignishandler hinzugefügt (oder entfernt) werden können.

In der Regel haben JavaScript-Objekte, die Ereignisse auslösen, entsprechende „onevent“-Eigenschaften (benannt durch Voranstellen von „on“ vor den Namen des Ereignisses). Diese Eigenschaften werden aufgerufen, um 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. Für jedes Ereignis in einem Element kann nur ein Ereignishandler zugewiesen werden. Falls erforderlich, kann der Handler durch Zuweisung einer anderen Funktion zur gleichen Eigenschaft ersetzt werden.

Im Folgenden zeigen wir, wie eine einfache greet()-Funktion für das click-Ereignis mithilfe 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 oder ist von der Event-Schnittstelle abgeleitet.

Der flexibelste Weg, um einen Ereignishandler auf einem Element festzulegen, ist die Verwendung der Methode EventTarget.addEventListener. Dieser Ansatz ermöglicht es, einem Element mehrere Listener zuzuweisen und Listener bei Bedarf zu entfernen (mithilfe von EventTarget.removeEventListener).

Im Folgenden zeigen wir, wie eine einfache greet()-Funktion als Listener/Ereignishandler für das click-Ereignis festgelegt werden kann (Sie könnten stattdessen einen anonymen Funktionsausdruck anstelle einer benannten Funktion verwenden, wenn 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 zur Steuerung der Erfassungs- und Entfernungsaspekte der Ereignisse annehmen. Weitere Informationen finden Sie auf der Referenzseite zu EventTarget.addEventListener.

Verwendung eines Abbruchsignals

Ein bemerkenswertes Feature von Ereignis-Listenern ist die Möglichkeit, ein Abbruchsignal zu verwenden, um mehrere Ereignishandler gleichzeitig zu bereinigen.

Dies geschieht, indem dasselbe AbortSignal allen zuzufügen, die Sie zusammen entfernen möchten, und es dann an die addEventListener() Übergabeaufforderung anzuhängen. Danach können Sie die Methode abort() des Controllers aufrufen, der das AbortSignal besitzt, und es wird alle Ereignishandler entfernen, die mit diesem Signal hinzugefügt wurden. Beispiel, um 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 obigen Code erstellte Ereignishandler wie folgt entfernt werden:

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