10 – Ereignisse & Timing 🕓

🎯 1. Einleitung & W3Schools

In diesem Kapitel hast du gelernt, wie Ereignisse (Events) und Timing-Funktionen Webseiten interaktiv und lebendig machen – mit addEventListener, Event-Delegation und setTimeout/setInterval.

🔗 W3Schools – JavaScript Events
🔗 W3Schools – JavaScript Timing

🧠 2. KI-Prompt-Training

Aufgabe: Formuliere einen Prompt, mit dem du KI um Hilfe bitten würdest, um zu erklären, warum addEventListener besser ist als onclick – und wie man mit setInterval eine Uhr baut, die man auch wieder stoppen kann.

🖱️ Aufgabe 1: Event-Listener – Wann wird aufgeräumt?

Ein Mitschüler hat folgenden Code geschrieben, um einen Zähler zu bauen:

let zaehler = 0;
document.getElementById("btn").addEventListener("click", function() {
  zaehler++;
  document.getElementById("ausgabe").textContent = zaehler;
});

Später möchte er den Button deaktivieren – aber der Zähler läuft weiter, wenn man ihn per Tastatur auslöst.

Deine Aufgabe:

1. Warum kann der Listener nicht einfach „entfernt“ werden? Was fehlt?
2. Verbessere den Code, sodass der Listener später entfernt werden kann.
3. Erkläre, warum man bei dynamischen Inhalten oft Event-Delegation statt direkter Listener verwendet.
4. Formuliere einen Prompt, der einen entfernbareren Listener erstellt – mit klarer Trennung von Funktion und Listener.

⏱️ Aufgabe 2: Timing – Speicherleck vermeiden

Gegeben ist folgender Code für eine Uhr:

setInterval(() => {
  document.getElementById("uhr").textContent = new Date().toLocaleTimeString();
}, 1000);

Der Schüler wechselt später auf eine andere Seite – aber die Uhr läuft im Hintergrund weiter.

Deine Aufgabe:

1. Warum ist das ein Problem? (Stichwort: Speicherleck, unnötige Berechnungen)
2. Wie kannst du den Intervall später stoppen? Was musst du speichern?
3. Erstelle eine Funktion starteUhr() und stoppeUhr(), die sicher mit dem Intervall umgehen.
4. Formuliere einen Prompt, der eine steuerbare Uhr mit Start/Stop-Funktion erstellt – und erklärt, warum man die Intervall-ID speichern muss.