Event API - Einführung

Die JavaScript Event API bildet das Fundament interaktiver Webanwendungen, indem sie einen Mechanismus zur Reaktion auf Nutzerinteraktionen und Systemereignisse bereitstellt. Events repräsentieren Aktionen wie Mausklicks, Tastatureingaben oder das Laden von Ressourcen, die automatisch erkannt und verarbeitet werden können. Durch das Registrieren von Event-Listenern können Entwickler gezielt Code ausführen, wenn bestimmte Ereignisse eintreten, was dynamische und responsive Benutzeroberflächen ermöglicht. Die Event API folgt dem Prinzip der ereignisgesteuerten Programmierung und bietet verschiedene Methoden zur Ereigniserfassung, -weiterleitung und -verarbeitung im Browser-Kontext.

Inhaltsverzeichnis

Einführung

Das Event-Objekt ist ein fundamentales Konzept. Es repräsentiert jedes Ereignis, das im Browser auftritt - sei es ein Mausklick, Tastendruck, Seitenladung oder eine benutzerdefinierte Aktion. Das Event-Objekt enthält alle relevanten Informationen über das auftretende Ereignis.

Wenn ein Ereignis auftritt, erstellt der Browser automatisch ein Event-Objekt und übergibt es an die Event-Handler-Funktion. Dieses Objekt enthält Details über das Ereignis wie den Typ, das Ziel-Element und viele weitere Eigenschaften.

Event-Konstruktor

Syntax

new Event(type, options);

Parameter

type

Der Name des Ereignistyps (z.B. click, load, custom-event)

options

(Optional) Konfigurationsobjekt mit verschiedenen Eigenschaften.

Rückgabewert

Der Konstruktor gibt ein neues Event-Objekt zurück.

Beispiele - Event-Erstellung

In diesem einfachen Beispiel wird ein benutzerdefiniertes Ereignis (Event) erstellt und über einen Klick auf einen Button ausgelöst.

Zuerst wird ein minimales HTML aufgebaut, damit man ein Grundgerüst hat.

            index.html
        
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Custom Event - Beispiel</title>
    </head>
    <body>

        <button id="event-trigger">
            Event auslösen
        </button>

        <script src="main.js"></script>

    </body>
</html>

Der JavaScript-Part wird in der main.js platziert.

            main.js
        
const eventTrigger = document.getElementById("event-trigger");
if (eventTrigger) {

    // Event definieren
    const simpleEvent = new Event("myCustomEvent");

    // Klick auf den Button registrieren
    // und mit dispatchEvent Event auslösen
    eventTrigger.addEventListener("click", () => {
        document.dispatchEvent(simpleEvent);
    });

}

// Das gesamte Dokument auf dieses Event
// hören lassen.
document.addEventListener("myCustomEvent", (event) => {
    console.log("Custom Event ausgelöst");
    console.log(event);
});

Damit wurde ein benutzerdefiniertes Event aufgebaut. Dieses Event wird mit dem Klick auf den Button und document.dispatchEvent() ausgelöst. Da ein Event-Überwacher an document dran gehängt wurde, wird die Callback-Funktion ausgeführt.

navigation Navigation