JavaScript: Ereignisse (Events)

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

Teil des Kurses JavaScript

Kapitel 29 von 40 im Kurs JavaScript. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

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

events1.html

<button id="b">Klick mich</button>
<p id="ausgabe">noch nichts</p>
<script>
  const b = document.getElementById("b");
  let zaehler = 0;
  b.addEventListener("click", (event) => {
    zaehler++;
    document.getElementById("ausgabe").textContent =
      `Klick Nr. ${zaehler} auf <${event.target.tagName.toLowerCase()}>`;
  });
</script>

Häufige Ereignisse

Ereignis	Wann
click, dblclick	Klick, Doppelklick
input	Wert eines Felds ändert sich (bei jedem Tastendruck)
change	Wert wurde bestätigt
submit	Formular wird abgeschickt
keydown, keyup	Taste gedrückt/losgelassen
mouseover, mouseout, mousemove	Maus
pointerdown, pointerup, pointermove	Maus, Touch und Stift einheitlich
focus, blur	Fokus erhalten/verloren
scroll, resize	Scrollen, Fenstergröße
DOMContentLoaded, load	Seite geladen

Das Event-Objekt

Die Funktion bekommt ein Objekt mit Details zum Ereignis:

events2.html

<input id="feld" placeholder="Tippe etwas">
<p id="info"></p>
<script>
  const feld = document.getElementById("feld");
  feld.addEventListener("keydown", (e) => {
    document.getElementById("info").textContent =
      `Taste: ${e.key}, Code: ${e.code}, Shift: ${e.shiftKey}`;
  });
  feld.addEventListener("input", (e) => console.log("Wert:", e.target.value));
</script>

Eigenschaft	Bedeutung
e.target	Element, an dem das Ereignis entstand
e.currentTarget	Element, an dem der Listener hängt
e.key, e.code	gedrückte Taste
e.clientX, e.clientY	Mausposition im Fenster
e.preventDefault()	Standardverhalten verhindern
e.stopPropagation()	Weitergabe nach oben stoppen

Standardverhalten verhindern

events3.html

<a id="link" href="https://example.com">Normaler Link</a>
<form id="f"><input name="q" value="test"><button>Senden</button></form>
<p id="ausgabe"></p>
<script>
  document.getElementById("link").addEventListener("click", (e) => {
    e.preventDefault();                              // Link nicht öffnen
    document.getElementById("ausgabe").textContent = "Link blockiert";
  });
  document.getElementById("f").addEventListener("submit", (e) => {
    e.preventDefault();                              // Seite nicht neu laden
    const daten = new FormData(e.target);
    document.getElementById("ausgabe").textContent = "Formular: " + daten.get("q");
  });
</script>

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:

events4.html

<ul id="liste">
  <li>Eins</li><li>Zwei</li><li>Drei</li>
</ul>
<button id="neu">Neuer Eintrag</button>
<p id="ausgabe"></p>
<script>
  const liste = document.getElementById("liste");
  liste.addEventListener("click", (e) => {
    const li = e.target.closest("li");
    if (!li) return;
    document.getElementById("ausgabe").textContent = "Gewählt: " + li.textContent;
    li.classList.toggle("fertig");
    li.style.textDecoration = li.classList.contains("fertig") ? "line-through" : "";
  });
  let n = 3;
  document.getElementById("neu").addEventListener("click", () => {
    const li = document.createElement("li");
    li.textContent = "Eintrag " + (++n);
    liste.append(li);
  });
</script>

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

const el = new EventTarget();          // oder ein beliebiges DOM-Element
el.addEventListener("meldung", (e) => console.log("Detail:", e.detail));
el.dispatchEvent(new CustomEvent("meldung", { detail: { id: 1 } }));

Ausgabe:

Detail: { id: 1 }

Merke

• addEventListener("click", funktion) meldet eine Reaktion an
• Das Event-Objekt liefert target, key, Position usw.
• preventDefault() verhindert das Standardverhalten (Link, Formular)
• Ereignisse steigen auf: Event Delegation spart Listener
• Nutze Buttons und Formularelemente, damit alles per Tastatur geht

Übungsaufgabe

Baue eine Liste mit Event Delegation: Ein Klick auf einen Eintrag hakt ihn ab; ein Eingabefeld mit Button fügt neue Einträge hinzu.

Quiz zur Selbstkontrolle

Was macht preventDefault()?

• Es verhindert das Standardverhalten des Ereignisses (richtig)
• Es stoppt das Programm
• Es löscht das Element
• Es wiederholt das Ereignis

Was ist Event Delegation?

• Ein Listener am Elternelement bedient viele Kinder (richtig)
• Ein Listener pro Kind
• Ereignisse an den Server schicken
• Ereignisse blockieren

Welches Ereignis feuert bei jedem Tastendruck in einem Textfeld?

• input (richtig)
• change
• submit
• load

Weiter im Kurs

Zurück: Das DOM: Elemente finden und ändern

Weiter: Formulare und Eingaben

Alle Kapitel: JavaScript im Überblick