Wie reagiert eine Seite auf einen Klick?
Ein Ereignis (englisch event) ist etwas, das auf einer Seite geschieht: ein Klick, eine Eingabe, das Absenden eines Formulars. Mit einem Listener reagiert die Seite darauf, und eine Prüfung der Eingaben, die Validierung, hält falsche Daten fern.
Studierende melden sich über ein Formular zum Frühstück in der Mensa an. Niemand soll eine leere Anmeldung oder eine Adresse ohne At-Zeichen abschicken.
Am Ende dieser Lektion
Notiz
Ich kann auf ein Ereignis reagieren und die Eingaben eines Formulars prüfen.
Schlüsselwörter
| Begriff | Was er bedeutet | Beispiel |
|---|---|---|
| Ereignis | etwas, das auf der Seite geschieht | click |
| Listener | eine Funktion, die ausgeführt wird, wenn ein Ereignis eintritt | |
| Formularfeld | ein Feld, in das Menschen etwas eingeben | <input> |
| Validierung | die Prüfung, ob eine Eingabe den Regeln entspricht | |
| Standardverhalten | was der Browser ohne eigenen Code tut, zum Beispiel die Seite neu laden |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Ein Listener wartet auf ein Ereignis
Mit element.addEventListener("click", funktion) melden Sie eine Funktion an. Der Browser ruft sie jedes Mal auf, wenn das Ereignis auf diesem Element eintritt.
Häufige Ereignisse sind click für einen Klick, input für jede Änderung in einem Feld und submit für das Absenden eines Formulars. Der Name steht in Anführungszeichen und ist englisch.
Zählen Sie Klicks
<button id="knopf" type="button">Portion bestellen</button>
<p id="ausgabe">0 Portionen</p>
Formularfelder haben Typ, Namen und Wert
Ein input hat einen type, zum Beispiel text, email oder number. Ein label mit for benennt das Feld und macht es klickbar. Der eingegebene Text steht im Skript unter value.
Beim Absenden lädt der Browser die Seite neu. Das ist das Standardverhalten. Mit event.preventDefault() im Listener für submit halten Sie es an und prüfen zuerst.
Prüfen Sie ein Formular im Skript
<form id="anmeldung">
<label for="name">Name</label>
<input id="name" type="text">
<button type="submit">Anmelden</button>
</form>
<p id="meldung"></p>
Der Browser und der Server prüfen beide
Der Browser prüft viel allein, wenn Sie Attribute setzen: required verlangt eine Eingabe, type="email" eine Adresse, min und max begrenzen eine Zahl. Eigener JavaScript-Code prüft weitere Regeln und zeigt eine klare Meldung.
Diese Prüfung ist eine Hilfe für Menschen. Sie schützt nicht, denn jeder kann sie umgehen. Der Server prüft deshalb jede Eingabe noch einmal.
Ein Beispiel: Regeln für die Anmeldung
| Feld | Regel | In HTML |
|---|---|---|
| Name | nicht leer | `required` |
| enthält ein At-Zeichen und einen Punkt dahinter | `type="email"` | |
| Anzahl | eine ganze Zahl von 1 bis 10 | `type="number" min="1" max="10"` |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Ein häufiger Fehler
Warnung
Viele glauben, eine Prüfung im Browser genüge. Sie hilft nur ehrlichen Eingaben. Wer die Seite umgeht, sendet beliebige Daten. Der Server muss jede Eingabe noch einmal prüfen.
Das Lab zeigt drei Listener einer echten Seite
Die Seite im Lab hat ein Suchformular für Gerichte. Ihr Skript meldet drei Listener an: einen für submit, einen für input und einen für click.
Mit grep suchen Sie die Zeilen mit addEventListener und sehen, auf welchem Element sie hängen. Die Ausgabe enthält die Namen im Code der Seite, sie sind englisch.
Die Listener im Skript suchen
docker exec jupyter grep -n "addEventListener" site/app.jsHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.