Kapitel 14: Ereignisse (Auf Benutzeraktionen reagieren)

Ereignisse (Events) erlauben Ihrer Webseite, auf Benutzeraktionen zu reagieren. In diesem Kapitel lernen Sie alles über Events.

14.1 Was sind Ereignisse? Klick/Eingabe/Bewegung

Ereignisse sind Aktionen, die auf einer Webseite passieren.

Beispiele für Ereignisse

Ereignis-Typ	Beschreibung	Beispiel
Maus	Klick, Bewegung	Button klicken, Über ein Element fahren
Tastatur	Tasten drücken	Text eingeben, Enter drücken
Formular	Eingabe, Absenden	Texteingabe, Formular absenden
Fenster	Laden, Größe ändern	Seite lädt, Fenstergröße ändert sich

Ereignis-Beispiel

<button id="meinButton">Klick mich!</button>

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

14.2 Ereignis-Drei-Elemente: Ereignisquelle + Ereignistyp + Ereignisbehandlungsfunktion

Jedes Ereignis hat 3 Elemente:

1. Ereignisquelle (Event Source)

Das HTML-Element, das das Ereignis auslöst.

let button = document.getElementById("meinButton");  // Ereignisquelle

2. Ereignistyp (Event Type)

Die Art des Ereignisses.

"click"    // Klick
"mouseover" // Maus darüber fahren
"keydown"  // Taste drücken

3. Ereignisbehandlungsfunktion (Event Handler)

Die Funktion, die ausgeführt wird, wenn das Ereignis eintritt.

function() {
    alert("Button wurde geklickt!");
}

Vollständiges Beispiel

// 1. Ereignisquelle
let button = document.getElementById("meinButton");

// 2. Ereignistyp + 3. Ereignisbehandlungsfunktion
button.addEventListener("click", function() {
    alert("Button wurde geklickt!");
});

14.3 Häufige Maus-Ereignisse: click/mouseover/mouseout

click - Klicken

<button id="btn">Klick mich!</button>
<p id="anzahl">0</p>

<script>
    let anzahl = 0;
    let btn = document.getElementById("btn");
    let anzeige = document.getElementById("anzahl");
    
    btn.addEventListener("click", function() {
        anzahl++;
        anzeige.textContent = anzahl;
    });
</script>

mouseover - Maus darüber fahren

<div id="box" style="width: 200px; height: 200px; background-color: blau;"></div>

<script>
    let box = document.getElementById("box");
    
    box.addEventListener("mouseover", function() {
        box.style.backgroundColor = "rot";
    });
</script>

mouseout - Maus verlassen

box.addEventListener("mouseout", function() {
    box.style.backgroundColor = "blau";
});

Praxis-Beispiel: Hover-Effekt

<button id="hoverBtn">Über mich fahren!</button>

<script>
    let btn = document.getElementById("hoverBtn");
    
    btn.addEventListener("mouseover", function() {
        btn.style.backgroundColor = "grün";
        btn.style.color = "weiß";
    });
    
    btn.addEventListener("mouseout", function() {
        btn.style.backgroundColor = "";
        btn.style.color = "";
    });
</script>

14.4 Häufige Tastatur-Ereignisse: keydown/keyup

keydown - Taste drücken (während)

<input type="text" id="eingabe">
<p id="ausgabe"></p>

<script>
    let eingabe = document.getElementById("eingabe");
    let ausgabe = document.getElementById("ausgabe");
    
    eingabe.addEventListener("keydown", function(event) {
        ausgabe.textContent = "Sie drücken: " + event.key;
    });
</script>

keyup - Taste loslassen

eingabe.addEventListener("keyup", function(event) {
    ausgabe.textContent = "Sie haben losgelassen: " + event.key;
});

Praxis-Beispiel: Eingabe prüfen

<input type="text" id="name" placeholder="Namen eingeben...">
<p id="hinweis"></p>

<script>
    let nameInput = document.getElementById("name");
    let hinweis = document.getElementById("hinweis");
    
    nameInput.addEventListener("keyup", function() {
        if (nameInput.value.length < 3) {
            hinweis.textContent = "Namen muss mindestens 3 Zeichen lang sein.";
            hinweis.style.color = "rot";
        } else {
            hinweis.textContent = "Namen ist gültig!";
            hinweis.style.color = "grün";
        }
    });
</script>

14.5 Häufige Formular-Ereignisse: focus/blur/submit

focus - Eingabefeld fokussieren

<input type="text" id="email" placeholder="E-Mail">
<p id="hinweis"></p>

<script>
    let emailInput = document.getElementById("email");
    let hinweis = document.getElementById("hinweis");
    
    emailInput.addEventListener("focus", function() {
        hinweis.textContent = "Bitte geben Sie eine gültige E-Mail-Adresse ein.";
    });
</script>

blur - Eingabefeld fokus verlieren

emailInput.addEventListener("blur", function() {
    if (!emailInput.value.includes("@")) {
        hinweis.textContent = "E-Mail-Adresse ist ungültig!";
        hinweis.style.color = "rot";
    } else {
        hinweis.textContent = "E-Mail-Adresse ist gültig!";
        hinweis.style.color = "grün";
    }
});

submit - Formular absenden (Wichtig!)

<form id="meinForm">
    <input type="text" name="name" required>
    <button type="submit">Absenden</button>
</form>

<script>
    let form = document.getElementById("meinForm");
    
    form.addEventListener("submit", function(event) {
        // ⚠️ WICHTIG: Standardverhalten verhindern!
        event.preventDefault();
        
        alert("Formular wird abgesendet...");
        // Hier können Sie AJAX-Anfragen senden
    });
</script>

⚠️ event.preventDefault() ist WICHTIG!

• Verhindert, dass die Seite neu lädt
• Erlaubt Ihnen, das Formular mit JavaScript zu verarbeiten

14.6 Praxis: Button-Klick Text ändern / Maus-Hover Farbe ändern

Projekt 1: Button-Klick Text ändern

<h1 id="titel">Alter Titel</h1>
<button id="aendernBtn">Titel ändern</button>

<script>
    let titel = document.getElementById("titel");
    let btn = document.getElementById("aendernBtn");
    
    btn.addEventListener("click", function() {
        titel.textContent = "Neuer Titel!";
        titel.style.color = "blau";
    });
</script>

Projekt 2: Maus-Hover Farbe ändern

<div id="box" style="width: 300px; height: 200px; background-color: grau; transition: all 0.3s;"></div>

<script>
    let box = document.getElementById("box");
    
    box.addEventListener("mouseover", function() {
        box.style.backgroundColor = "rot";
        box.style.transform = "scale(1.1)";
    });
    
    box.addEventListener("mouseout", function() {
        box.style.backgroundColor = "grau";
        box.style.transform = "scale(1)";
    });
</script>

Projekt 3: Eingabe anzeigen

<input type="text" id="eingabe" placeholder="Text eingeben...">
<button id="anzeigenBtn">Anzeigen</button>
<p id="ausgabe"></p>

<script>
    let eingabe = document.getElementById("eingabe");
    let btn = document.getElementById("anzeigenBtn");
    let ausgabe = document.getElementById("ausgabe");
    
    btn.addEventListener("click", function() {
        let text = eingabe.value;
        ausgabe.textContent = "Sie haben eingegeben: " + text;
    });
    
    // Auch mit Enter-Taste
    eingabe.addEventListener("keyup", function(event) {
        if (event.key === "Enter") {
            btn.click();  // Button-Klick simulieren
        }
    });
</script>

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Ereignisse sind Aktionen auf der Webseite
• ✅ 3 Elemente: Ereignisquelle, Ereignistyp, Ereignisbehandlungsfunktion
• ✅ Maus-Ereignisse: click, mouseover, mouseout
• ✅ Tastatur-Ereignisse: keydown, keyup
• ✅ Formular-Ereignisse: focus, blur, submit
• ✅ event.preventDefault() verhindert Standardverhalten
• ✅ Praxis-Projekte: Text ändern, Hover-Effekte, Eingabe anzeigen

➡️ Nächster Schritt

Im nächsten Kapitel lernen wir DOM-Erweitert - Knoten erstellen, hinzufügen, entfernen!

---

Übung:

1. Erstellen Sie eine HTML-Datei mit einem Button und einem Absatz
2. Ändern Sie den Absatztext, wenn der Button geklickt wird
3. Ändern Sie die Hintergrundfarbe, wenn die Maus über den Button fährt
4. Erstellen Sie ein Eingabefeld, das den Text in Echtzeit anzeigt
5. Testen Sie alles im Browser