Events
Events verbinden Nutzeraktionen mit Code: Klicks, Eingaben, Tastendrücke und mehr.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
addEventListener
addEventListener verbindet ein Ereignis mit einer Funktion.
Häufige Events: click, input, change, submit, keydown.
const button = document.querySelector('#speichern');
button.addEventListener('click', () => {
console.log('Gespeichert!');
});Das Event-Objekt
Der Listener erhält ein Event-Objekt mit Details: event.target ist das auslösende Element, event.key die gedrückte Taste.
event.preventDefault() unterbindet das Standardverhalten, etwa das Neuladen beim Formular-Absenden.
window.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
schliesseDialog();
}
});Bubbling und Delegation
Events steigen vom Ziel nach oben durch die Eltern (Bubbling).
Event-Delegation nutzt das aus: ein Listener am Container behandelt Klicks aller Kinder — auch später hinzugefügter.
document.querySelector('ul').addEventListener('click', (event) => {
if (event.target.matches('li')) {
console.log('Eintrag:', event.target.textContent);
}
});Vertiefung
Bubbling und Delegation
Events steigen vom auslösenden Element nach oben. Ein Listener am Container kann deshalb Klicks von vielen Kindern behandeln — auch von Elementen, die erst später erzeugt werden.
event.target ist das konkrete Element, event.currentTarget der Element, an dem der Listener hängt. Diese Unterscheidung ist bei Delegation entscheidend.
document.querySelector("ul").addEventListener("click", (event) => {
if (event.target.matches("li")) {
console.log(event.target.textContent);
}
});Merksatz: Ein Listener am Container reicht für viele Kinder. Prüfe mit matches, ob das Ziel passt.
Übungsaufgabe
Klick-Zähler
Baue einen Zähler, der bei jedem Klick auf einen Button hochzählt. Ein zweiter Button setzt ihn zurück. Nutze addEventListener und textContent.
Das soll dein Programm können
- addEventListener für click
- Zählerstand in einer Variable
- textContent aktualisieren
- Reset-Button implementieren
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Der Listener darf nicht sofort ausgeführt werden: addEventListener("click", () => { ... }).
Lösung anzeigen
let klicks = 0;
const anzeige = document.querySelector("#anzeige");
const plus = document.querySelector("#plus");
const reset = document.querySelector("#reset");
plus.addEventListener("click", () => {
klicks += 1;
anzeige.textContent = klicks;
});
reset.addEventListener("click", () => {
klicks = 0;
anzeige.textContent = klicks;
});Warum funktioniert das?
Der Zustand lebt in der Variable klicks. Jede Änderung wird über textContent sichtbar gemacht; der Reset setzt denselben Zustand zurück.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Der Lernzähler
Baue einen kleinen Zähler, der bei jedem Klick hochzählt und den Wert im DOM anzeigt. Erweitere ihn um einen Reset-Button.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.