Events

Geschätzte Lektüre: 7 Minuten 650 Ansichten

Events sind ein grundlegendes Konzept in JavaScript, das es ermöglicht, auf Benutzerinteraktionen oder systemseitige Vorgänge zu reagieren. Sie bilden die Basis für interaktive Webanwendungen, indem sie Funktionen auslösen, sobald bestimmte Aktionen stattfinden – etwa ein Mausklick, eine Tastatureingabe oder das Laden einer Webseite.

Grundlagen: Was sind Events?

Ein Event (Ereignis) ist eine Aktion oder ein Vorkommnis, das im Browser auftritt und von JavaScript erkannt werden kann. Typische Beispiele sind:
• Maus-Events (Klick, Doppelklick, Mouseover)
• Tastatur-Events (Tastendruck, Tastenfreigabe)
• Formular-Events (Eingabe, Absenden)
• Lade-Events (Seite vollständig geladen)

JavaScript kann auf diese Events lauschen („Event Listening“) und darauf mit definierten Funktionen („Event Handlern“) reagieren.

Beispiel: Einfacher Klick-Event

<button id="meinButton">Klick mich!</button>
<script>
  const button = document.getElementById("meinButton");
  button.addEventListener("click", function() {
    alert("Button wurde geklickt!");
  });
</script>

Hier wird ein Event Listener auf den Button gesetzt, der bei einem Klick eine Alert-Nachricht ausgibt.

Event-Handler: Wie reagiert man auf Events?

Es gibt drei gängige Methoden, um auf Events zu reagieren:

Inline Event-Handler (HTML-Attribut)

Direkt im HTML-Element wird eine JavaScript-Funktion aufgerufen.

<button onclick="alert('Geklickt!')">Klick mich</button>

Nachteil: Diese Methode vermischt HTML und JavaScript und gilt als veraltet.

DOM-Event-Handler (JavaScript-Zuweisung)

Eine Funktion wird einer Event-Eigenschaft des HTML-Elements zugewiesen.

const button = document.querySelector("button");
button.onclick = function() {
  console.log("Button geklickt");
};

Nachteil: Pro Event kann nur eine Funktion zugewiesen werden.

addEventListener() (Moderne Methode)

Die flexibelste Methode: Mehrere Funktionen können auf ein Event hören.

button.addEventListener("click", function() {
  console.log("Erster Handler");
});
button.addEventListener("click", function() {
  console.log("Zweiter Handler");
});

Vorteil: Mehrere Listener möglich, bessere Kontrolle über Event-Fluss.

removeEventListener() – Event-Handler entfernen

Ein oft übersehener, aber wichtiger Aspekt der Event-Verarbeitung in JavaScript ist das gezielte Entfernen von Event-Listenern mit removeEventListener().

Die Methode erfordert exakt dieselben Parameter wie addEventListener():

element.removeEventListener("Eventtyp", Funktionsreferenz, [Phase]);

Wichtige Voraussetzungen:
• Funktionsreferenz muss identisch sein
→ Anonyme Funktionen (() => {}) können nicht entfernt werden.
• Event-Typ und Phase müssen übereinstimmen
→ click + Bubbling (false) ≠ click + Capturing (true).

Beispiel: Event-Handler hinzufügen & entfernen

const button = document.getElementById("meinButton");

// Handler-Funktion (muss benannt sein!)
function handleClick() {
  console.log("Button wurde geklickt");
  button.removeEventListener("click", handleClick); // Entfernt sich selbst
}

// Hinzufügen
button.addEventListener("click", handleClick);

Effekt: Nach dem ersten Klick wird der Listener automatisch entfernt.

Event-Objekt: Informationen zum Event

Jeder Event-Handler erhält automatisch ein Event-Objekt, das Details zum Event enthält, z. B.:
• event.target → Das auslösende Element
• event.type → Art des Events („click“, „keydown“ etc.)
• event.preventDefault() → Verhindert Standardverhalten (z. B. Formular-Absenden)

Beispiel: Event-Objekt nutzen

document.addEventListener("keydown", function(event) {
  console.log(`Taste gedrückt: ${event.key}`);
});

Hier wird bei jedem Tastendruck die gedrückte Taste ausgegeben.

Event-Propagation: Bubbling und Capturing

Events durchlaufen im DOM drei Phasen:
• Capturing-Phase (von oben nach unten zum Zielelement)
• Target-Phase (am auslösenden Element)
• Bubbling-Phase (vom Zielelement zurück nach oben)

Standardmäßig nutzt addEventListener die Bubbling-Phase. Mit dem dritten Parameter kann man die Phase steuern:

element.addEventListener("click", handler, true); // Capturing
element.addEventListener("click", handler, false); // Bubbling (Default)

Beispiel: Event-Stoppen mit stopPropagation()

innerElement.addEventListener("click", function(event) {
  event.stopPropagation(); // Verhindert, dass das Event nach oben "blubbert"
  console.log("Nur innerElement reagiert");
});

Custom Events: Eigene Events erstellen

Man kann auch benutzerdefinierte Events erstellen und auslösen:

// Custom Event erstellen
const meinEvent = new CustomEvent("meinEvent", { detail: { text: "Hallo!" } });

// Event Listener hinzufügen
document.addEventListener("meinEvent", (e) => {
  console.log(e.detail.text); // "Hallo!"
});

// Event auslösen
document.dispatchEvent(meinEvent);

Anwendung: Nützlich für komplexe Anwendungen, z. B. Kommunikation zwischen Komponenten.

Praxisbeispiel: Formularvalidierung mit Events

<form id="meinFormular">
  <input type="text" id="benutzername" required>
  <button type="submit">Absenden</button>
</form>
<script>
  const form = document.getElementById("meinFormular");
  form.addEventListener("submit", function(event) {
    const input = document.getElementById("benutzername");
    if (input.value.length < 3) {
      event.preventDefault(); // Formular nicht absenden
      alert("Benutzername zu kurz!");
    }
  });
</script>

Hier wird das Standardverhalten des Formulars unterbunden, falls die Validierung fehlschlägt.

Essenziell

Events sind essenziell für interaktive Webanwendungen. Mit addEventListener, dem Event-Objekt und einer klaren Strukturierung des Event-Flusses lassen sich komplexe Interaktionen elegant umsetzen. Fortgeschrittene Techniken wie Custom Events ermöglichen zudem eine saubere Architektur in modernen JavaScript-Anwendungen.

Dieses Dokument teilen

Events

Oder Link kopieren

INHALT

Abonnieren

×
Cancel