Ereignisse (Events)

Webseiten reagieren auf Ereignisse: Klicks, Tastendrücke, Formulare, Mausbewegungen. Mit addEventListener legst du fest, welche Funktion dann laufen soll.

Häufige Ereignisse

Das Event-Objekt

Die Funktion bekommt ein Objekt mit Details zum Ereignis:

Standardverhalten verhindern

Bubbling und Delegation

Ereignisse steigen auf: Ein Klick auf ein <li> löst die Listener am <li>, dann am <ul>, am <body> usw. aus (Bubbling). Das nutzt man für Event Delegation: Ein einziger Listener am Elternelement bedient viele (auch später hinzugefügte) Kinder:

Neue Einträge funktionieren sofort, ohne dass du einen weiteren Listener anmeldest.

Listener entfernen und Optionen

function einmal(e) { console.log("nur einmal", e.type); }
btn.addEventListener("click", einmal);
btn.removeEventListener("click", einmal);       // dieselbe Funktion nötig

btn.addEventListener("click", () => {}, { once: true });      // nach dem ersten Mal automatisch entfernt
window.addEventListener("scroll", () => {}, { passive: true }); // verspricht, nicht preventDefault zu rufen

const abbruch = new AbortController();
btn.addEventListener("click", () => {}, { signal: abbruch.signal });
abbruch.abort();                                // entfernt alle Listener dieses Signals

Verwende addEventListener statt onclick="..." im HTML. So bleiben HTML und JavaScript getrennt, und du kannst mehrere Listener anmelden.

Tastatur-Bedienung

Baue Funktionen so, dass sie auch per Tastatur gehen: Nutze <button> statt <div> mit Klick-Listener (Buttons sind fokussierbar und reagieren auf Enter/Leertaste), und prüfe bei eigenen Tastenkürzeln e.key.

document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") schliesseDialog();
  if (e.ctrlKey && e.key.toLowerCase() === "k") { e.preventDefault(); oeffneSuche(); }
});

Eigene Ereignisse

Detail: { id: 1 }