Ereignisbehandlung (Überblick)

Ereignisse werden auf den Seiten der JavaScript-Objekte dokumentiert, die sie auslösen. Um beispielsweise herauszufinden, 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 zum Registrieren von Handlern. Ereignis-Handler-Code kann ausgeführt werden, wenn ein Ereignis ausgelöst wird, indem er dem entsprechenden onevent-Eigenschaft des Zielelements zugewiesen oder als Listener für das Element unter Verwendung der addEventListener()-Methode registriert wird. In jedem Fall 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 Ereignis-Handler hinzugefügt (oder entfernt) werden können.

Gewohnheitsmäßig haben JavaScript-Objekte, die Ereignisse auslösen, entsprechende "Onevent"-Eigenschaften (die durch Voranstellen von "on" zum Namen des Ereignisses benannt werden). 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 Ereignis-Handler-Code einzurichten, können Sie ihn einfach der entsprechenden Onevent-Eigenschaft zuweisen. Für jedes Ereignis in einem Element kann nur ein Ereignis-Handler zugewiesen werden. Falls nötig, 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 gesetzt 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 Ereignisobjekt implementiert entweder die Event-Schnittstelle oder ist davon abgeleitet.

Der flexibelste Weg, einen Ereignis-Handler auf einem Element zu setzen, ist die Verwendung der EventTarget.addEventListener-Methode. Dieser Ansatz erlaubt es, mehrere Listener einem Element zuzuweisen und bei Bedarf Listener zu entfernen (mit EventTarget.removeEventListener).

Unten zeigen wir, wie eine greet()-Funktion als Listener/Ereignis-Handler für das click-Ereignis gesetzt werden kann (Sie könnten, wenn gewünscht, einen anonymen Funktionsausdruck anstelle einer benannten Funktion verwenden). 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 abgefangen und entfernt werden. Weitere Informationen finden Sie auf der Referenzseite EventTarget.addEventListener.

Verwendung eines Abbruchsignals

Ein bemerkenswertes Feature der Ereignis-Listener ist die Fähigkeit, ein Abbruchsignal zu verwenden, um mehrere Ereignis-Handler gleichzeitig aufzuräumen.

Dies geschieht, indem dasselbe AbortSignal dem addEventListener()-Aufruf für alle Ereignis-Handler übergeben wird, die Sie gemeinsam entfernen möchten. Sie können dann abort() auf dem Controller aufrufen, der das AbortSignal besitzt, und es entfernt alle mit diesem Signal hinzugefügten Ereignis-Handler. 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