Die Klingel an der Tür
Eine Klingel tut nichts, bis jemand drückt. Dann klingelt es.
Eine Webseite kann das auch. Bisher lief dein Skript einmal beim Laden. Mit Ereignissen wartet die Seite und reagiert, wenn jemand etwas tut.
Am Ende dieser Lektion
Notiz
Ich kann mit addEventListener eine Funktion starten, wenn jemand auf einen Knopf klickt.
Schlüsselwörter
| Begriff | Was er bedeutet | Beispiel |
|---|---|---|
| Ereignis | etwas, das auf der Seite passiert, zum Beispiel ein Klick | click |
| addEventListener | sagt einem Element: wenn dieses Ereignis kommt, starte diese Funktion | knopf.addEventListener("click", f) |
| Funktion | ein Block Code mit einem Namen, den man später ausführt | |
| value | der Text, der gerade in einem Eingabefeld steht | feld.value |
| Knopf | das HTML-Element button, auf das man klickt | <button> |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Starter: die Seite verändern
Probier es aus
Starter: die Seite verändern
3 FragenDeine Antworten werden hier bewertet und nicht gespeichert. Mit einem Konto bleiben deine Ergebnisse erhalten.
Eine Funktion kann man weitergeben
Für Ereignisse brauchst du eine neue Idee. Eine Funktion ist wie ein Wert: Du kannst sie weitergeben.
Achte auf den Unterschied. sagHallo() mit Klammern ruft die Funktion jetzt auf. sagHallo ohne Klammern gibt sie nur weiter.
Probiere es aus: eine Funktion weitergeben
// Eine Funktion kann man weitergeben wie einen Wert.
function sagHallo() {
console.log('Hallo aus der Funktion!');
}
function dreimal(aktion) {
aktion();
aktion();
aktion();
}
// Ohne Klammern: Wir geben die Funktion weiter, rufen sie aber noch nicht auf.
dreimal(sagHallo);
Auf einen Klick reagieren
Du suchst den Knopf. Dann sagst du ihm zwei Dinge: auf welches Ereignis er wartet und welche Funktion laufen soll.
knopf.addEventListener("click", function () { ... });
In die geschweiften Klammern kommt, was bei jedem Klick passieren soll.
Probiere es aus: ein Zähler
<h1>Verkaufte Brezeln</h1>
<p id="anzahl"></p>
<button id="plus">Noch eine</button>
Ein häufiger Fehler
Warnung
Viele schreiben knopf.addEventListener("click", zeigeAnzahl()) mit Klammern. Dann läuft die Funktion sofort, nicht beim Klick. Ohne Klammern gibst du die Funktion nur weiter. Schreibe sie also ohne Klammern oder in function () { ... }.