10 – Ereignisse & Timing 🕓

Wie deine Webseite auf Benutzer reagiert und zeitgesteuert arbeitet

🎯 1. Was sind Ereignisse & Timing?

Ereignisse (Events) sind Aktionen wie Klicks oder Tastendruck – darauf reagiert deine Webseite dynamisch. Timing-Funktionen führen Code zeitgesteuert aus – z. B. eine Meldung nach 3 Sekunden automatisch ausblenden.

📊 2. Übersicht: Ereignisse & Timing

Häufige Ereignisse

Ereignis	Beschreibung	Beispiel
`click`	Mausklick	Button-Bestätigung
`input`	Änderung in Eingabefeld	Live-Suche
`submit`	Formular absenden	Kontaktformular
`keydown`	Taste gedrückt	Spiele

Timing-Funktionen

Funktion	Zweck	Beispiel
`setTimeout`	Einmalige Verzögerung	Meldung nach 3s ausblenden
`setInterval`	Wiederholte Ausführung	Digitale Uhr

🎯 3. Einleitung & W3Schools

Ereignisse und Timing machen Webseiten interaktiv und lebendig. Ohne sie wäre JavaScript passiv – nur für Berechnungen im Hintergrund.

🔗 W3Schools – JavaScript Events

🧠 4. 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.

🖱️ 5. Event-Listener – die moderne Methode

Mit addEventListener kannst du mehrere Funktionen auf dasselbe Ereignis legen – ohne vorherige zu überschreiben.

// Modern: addEventListener
document.getElementById("btn-demo-listener").addEventListener("click", function() {
  const zaehler = parseInt(this.getAttribute("data-anzahl") || "0") + 1;
  this.setAttribute("data-anzahl", zaehler);
  document.getElementById("ausgabe-listener").textContent = 
    "Button wurde " + zaehler + "× geklickt.";
});

// ❌ Vermeiden: onclick als Eigenschaft
// button.onclick = ... → überschreibt vorherige Funktionen!

🔑 6. Das Event-Objekt – Details zur Aktion

Jede Event-Funktion erhält automatisch ein event-Objekt mit Informationen – z. B. welche Taste gedrückt wurde oder welches Element geklickt wurde.

document.getElementById("input-demo").addEventListener("keydown", function(event) {
  if (event.key === "Enter") {
    document.getElementById("ausgabe-event").innerHTML = 
      "Du hast <strong>Enter</strong> gedrückt! Eingabe: „" + 
      event.target.value + "“";
    event.target.value = ""; // Feld leeren
  }
});

🔄 7. Event-Delegation – für dynamische Inhalte

Bei Inhalten, die zur Laufzeit hinzugefügt werden (z. B. per DOM), hängst du den Listener an ein übergeordnetes Element und prüfst das Ziel.

// Event-Delegation
document.getElementById("container-buttons").addEventListener("click", function(event) {
  if (event.target.tagName === "BUTTON") {
    document.getElementById("ausgabe-delegation").textContent = 
      "Geklickt: " + event.target.textContent;
  }
});

// Button hinzufügen
document.getElementById("btn-hinzufuegen").addEventListener("click", function() {
  const btn = document.createElement("button");
  btn.textContent = "Dynamisch " + (document.querySelectorAll("#container-buttons button").length + 1);
  document.getElementById("container-buttons").appendChild(btn);
});

⏱️ 8. Zeitgesteuerte Aktionen

⚠️ Wichtig: Speichere die Timer-ID von setInterval! Mit clearInterval kannst du die Wiederholung stoppen – sonst läuft sie ewig.

function demoTimeout() {
  const meldung = document.getElementById("meldung-timing");
  meldung.textContent = "✅ Erfolgreich gespeichert!";
  meldung.style.backgroundColor = "#d4edda";
  
  setTimeout(() => {
    meldung.textContent = "";
    meldung.style.backgroundColor = "";
  }, 3000);
}

let uhrIntervall = null;

function startUhr() {
  if (uhrIntervall) return;
  uhrIntervall = setInterval(() => {
    document.getElementById("uhr-timing").textContent = 
      new Date().toLocaleTimeString();
  }, 1000);
}

function stopUhr() {
  if (uhrIntervall) {
    clearInterval(uhrIntervall);
    uhrIntervall = null;
  }
}