Mit Events arbeiten

Events sind der Schlüssel zu interaktiven Webseiten. Sie ermöglichen es Ihrem JavaScript-Code, auf Benutzerinteraktionen wie Mausklicks, Tastatureingaben oder Formularübermittlungen zu reagieren.

Was sind Events?

Events sind Signale, die vom Browser gesendet werden, wenn etwas passiert:

• Ein Benutzer klickt auf einen Button
• Eine Seite wird geladen
• Ein Formular wird abgeschickt
• Eine Taste wird gedrückt
• Die Maus bewegt sich über ein Element

Event-Handler hinzufügen

Es gibt mehrere Möglichkeiten, auf Events zu reagieren:

1. addEventListener-Methode

Die moderne und empfohlene Methode:

const button = document.querySelector("#meinButton");

button.addEventListener("click", function() {
    console.log("Button wurde geklickt!");
});

Sie können auch benannte Funktionen verwenden:

function buttonKlickHandler() {
    alert("Hallo Welt!");
}

button.addEventListener("click", buttonKlickHandler);

2. Event-Handler als Eigenschaft

Eine einfachere, aber weniger flexible Methode:

const button = document.querySelector("#meinButton");

button.onclick = function() {
    console.log("Button wurde geklickt!");
};

Das Event-Objekt

Wenn ein Event ausgelöst wird, wird automatisch ein Event-Objekt erstellt, das Informationen über das Event enthält:

button.addEventListener("click", function(event) {
    console.log("Event-Typ:", event.type);
    console.log("Geklicktes Element:", event.target);
    console.log("Position X:", event.clientX, "Y:", event.clientY);
});

Häufige Event-Typen

Maus-Events

element.addEventListener("click", handleClick);      // Klick mit der Maus
element.addEventListener("dblclick", handleDblClick); // Doppelklick
element.addEventListener("mouseover", handleMouseOver); // Maus über Element
element.addEventListener("mouseout", handleMouseOut);  // Maus verlässt Element

Keyboard-Events

document.addEventListener("keydown", function(event) {
    console.log("Gedrückte Taste:", event.key);

    if (event.key === "Enter") {
        console.log("Enter-Taste wurde gedrückt!");
    }
});

Formular-Events

form.addEventListener("submit", handleSubmit);      // Formular wird abgeschickt
input.addEventListener("change", handleChange);     // Wert wurde geändert
input.addEventListener("input", handleInput);       // Wert wird geändert (sofort)
input.addEventListener("focus", handleFocus);       // Element erhält Fokus
input.addEventListener("blur", handleBlur);         // Element verliert Fokus

Fenster- und Dokument-Events

window.addEventListener("load", handleLoad);       // Seite vollständig geladen
document.addEventListener("DOMContentLoaded", handleDOMReady); // DOM ist bereit
window.addEventListener("resize", handleResize);   // Fenstergrösse wurde geändert

Event-Delegation

Diese Technik ermöglicht es, einen Event-Listener für ein übergeordnetes Element zu registrieren, anstatt für jedes untergeordnete Element:

// Ein Listener für alle Listenelemente
document.querySelector("#listenContainer").addEventListener("click", function(event) {
    if (event.target.tagName === "LI") {
        console.log("Liste wurde angeklickt:", event.target.textContent);
    }
});

Vorteile:

• Bessere Performance (weniger Event-Listener)
• Funktioniert auch für dynamisch hinzugefügte Elemente
• Weniger Code

Standardverhalten verhindern

Bei manchen Events möchten Sie das Standardverhalten des Browsers verhindern:

document.querySelector("form").addEventListener("submit", function(event) {
    // Verhindert das Neuladen der Seite beim Formular-Submit
    event.preventDefault();

    // Eigene Verarbeitung hier...
    console.log("Formular abgeschickt!");
});

Event-Listener entfernen

Um Speicherlecks zu vermeiden, sollten Sie nicht mehr benötigte Event-Listener entfernen:

function clickHandler() {
    console.log("Klick!");
    button.removeEventListener("click", clickHandler);
}

button.addEventListener("click", clickHandler);

Übung: Interaktive Elemente erstellen

Aufgabe: Event-Handler implementieren

Erstellen Sie eine HTML-Datei mit folgender Struktur und implementieren Sie die angegebenen Interaktionen:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Mit Events arbeiten</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .box {
            border: 1px solid #ccc;
            padding: 15px;
            margin: 15px 0;
            border-radius: 5px;
        }
        .highlight {
            background-color: #fffacd;
        }
        .todo-item {
            padding: 8px;
            margin: 5px 0;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
        }
        .todo-item.done {
            text-decoration: line-through;
            opacity: 0.7;
        }
        .mousearea {
            height: 100px;
            border: 1px solid #ddd;
            background-color: #f9f9f9;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        button {
            padding: 5px 10px;
            margin: 2px;
        }
    </style>
</head>
<body>
    <h1>Mit Events arbeiten</h1>

    <div class="box">
        <h2>Klick-Events</h2>
        <button id="changeTextBtn">Text ändern</button>
        <button id="toggleHighlightBtn">Hervorheben</button>
        <p id="outputText">Dieser Text kann geändert werden</p>
    </div>

    <div class="box">
        <h2>Maus-Events</h2>
        <div id="mouseArea" class="mousearea">Bewegen Sie die Maus über diesen Bereich</div>
        <p id="mouseOutput">Mausposition: -</p>
    </div>

    <div class="box">
        <h2>Tastatur-Events</h2>
        <input type="text" id="keyInput" placeholder="Tippen Sie hier...">
        <p id="keyOutput">Gedrückte Taste: -</p>
    </div>

    <div class="box">
        <h2>Formular-Events</h2>
        <form id="simpleForm">
            <div>
                <label for="nameInput">Name:</label>
                <input type="text" id="nameInput" required>
            </div>
            <div>
                <label for="emailInput">E-Mail:</label>
                <input type="email" id="emailInput" required>
            </div>
            <div>
                <label for="feedbackType">Feedback-Typ:</label>
                <select id="feedbackType">
                    <option value="lob">Lob</option>
                    <option value="verbesserung">Verbesserungsvorschlag</option>
                    <option value="fehler">Fehlermeldung</option>
                </select>
            </div>
            <button type="submit">Absenden</button>
        </form>
        <p id="formOutput">Formular-Status: Nicht abgeschickt</p>
    </div>

    <div class="box">
        <h2>Todo-Liste</h2>
        <div id="todoContainer">
            <div id="todoList">
                <div class="todo-item" data-id="1">
                    <span>JavaScript-Grundlagen lernen</span>
                    <button class="deleteBtn">Löschen</button>
                </div>
                <div class="todo-item" data-id="2">
                    <span>DOM-Manipulation üben</span>
                    <button class="deleteBtn">Löschen</button>
                </div>
                <div class="todo-item" data-id="3">
                    <span>Event-Handling verstehen</span>
                    <button class="deleteBtn">Löschen</button>
                </div>
            </div>
            <div>
                <input type="text" id="newTodoInput" placeholder="Neue Aufgabe...">
                <button id="addTodoBtn">Hinzufügen</button>
            </div>
        </div>
    </div>

    <script>
        // Hier kommt Ihr JavaScript-Code
    </script>
</body>
</html>

Aufgaben:

1. Klick-Events:

   • Beim Klick auf “Text ändern” soll der Text im outputText-Element geändert werden
   • Beim Klick auf “Hervorheben” soll die Klasse “highlight” für den Absatz ein- oder ausgeschaltet werden

2. Maus-Events:

   • Zeigen Sie die aktuelle Mausposition im “mouseOutput”-Element an, wenn die Maus über den “mouseArea” bewegt wird

3. Tastatur-Events:

   • Zeigen Sie die zuletzt gedrückte Taste im “keyOutput”-Element an

4. Formular-Events:

   • Verhindern Sie das Standardverhalten des Formulars bei der Übermittlung
   • Zeigen Sie stattdessen die eingegebenen Werte im “formOutput”-Element an

5. Todo-Liste:

   • Beim Klick auf ein Todo-Element soll es als “erledigt” markiert werden (Klasse “done” hinzufügen/entfernen)
   • Beim Klick auf “Löschen” soll das zugehörige Todo-Element entfernt werden
   • Mit “Hinzufügen” sollen neue Todos zur Liste hinzugefügt werden können

Zusammenfassung

• Events sind der Schlüssel zu interaktiven Webseiten
• Mit addEventListener können wir auf Benutzerinteraktionen reagieren
• Häufige Event-Typen sind click, mouseover, keydown, submit und change
• Das Event-Objekt enthält nützliche Informationen über das ausgelöste Event
• Mit preventDefault() können wir Standardverhalten des Browsers verhindern
• Event-Delegation erlaubt effiziente Event-Behandlung für mehrere Elemente

Im nächsten Kapitel lernen wir, wie wir speziell mit Formularen und Benutzereingaben arbeiten können.