Einführung in Ereignisse und Ereignis-Listener
Was sind Ereignisse in JavaScript?
JavaScript stellt Mechanismen zur Verfügung, um diese Ereignisse zu verarbeiten und spezifischen Code als Reaktion auszuführen, wodurch Webanwendungen interaktiv und dynamisch werden.
Häufige Ereignistypen
Erklärung von addEventListener() und wie man Ereignis-Listener hinzufügt
Um auf Ereignisse in JavaScript zu reagieren, wird ein Ereignis-Listener an ein Element angehängt. Die gebräuchlichste Methode hierfür ist die Funktion addEventListener(), die auf bestimmte Ereignisse wartet und eine Funktion aufruft, wenn das Ereignis eintritt.
element.addEventListener('event', function, useCapture);
event: Der Typ des Ereignisses, auf das Sie hören möchten (z. B.'click','submit');function: Die Callback-Funktion, die ausgeführt wird, wenn das Ereignis ausgelöst wird;useCapture(optional): Ein Boolean, der angibt, ob das Ereignis während der Capturing- oder Bubbling-Phase erfasst werden soll (Standard istfalse, d. h. es wird während der Bubbling-Phase zugehört).
Click-Ereignis-Listener
Ein click-Ereignis-Listener wird an den Button angehängt. Beim Klicken wird eine Benachrichtigung ausgelöst.
index.html
index.css
index.js
Der Ereignis-Listener wird an das Element #myButton angehängt. Wenn der Benutzer auf die Schaltfläche klickt, erscheint ein Meldungsfenster mit dem Text "Button clicked!".
Submit-Ereignis-Listener
Ein Ereignis-Listener für das submit-Ereignis wird hinzugefügt, um das Standardverhalten der Formularübermittlung zu verhindern und die Daten mit JavaScript zu verarbeiten.
index.html
index.css
index.js
Ein Ereignis-Listener für das submit-Ereignis des Formulars verhindert die Standardübermittlung mit event.preventDefault(), sodass stattdessen benutzerdefiniertes JavaScript die Daten verarbeitet. Nach dem Absenden wird der eingegebene Name abgerufen und in einem Absatz mit der ID displayName angezeigt.
Keypress-Ereignis
Ein keypress-Ereignis-Listener wird an das Eingabefeld angehängt. Beim Drücken einer Taste wird diese im Absatz angezeigt.
index.html
index.css
index.js
Jedes Mal, wenn eine Taste beim Tippen in das Eingabefeld gedrückt wird, wird die gedrückte Taste in der Konsole protokolliert.
Praktisches Beispiel: Formularvalidierung beim Absenden
Logik für die Formularvalidierung vor dem Absenden des Formulars erstellen.
index.html
index.css
index.js
Der submit-Event-Listener stellt sicher, dass das Formular nicht abgeschickt wird, wenn die erforderlichen Felder leer sind. Sind entweder das Benutzername- oder das Passwortfeld leer, wird das Ereignis am Fortfahren gehindert und eine Fehlermeldung angezeigt.
1. Was ist der Zweck von addEventListener()?
2. Welche der folgenden ist KEIN gültiger Ereignistyp für addEventListener()?
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.22Einführung in Ereignisse und Ereignis-Listener
Swipe um das Menü anzuzeigen
Was sind Ereignisse in JavaScript?
JavaScript stellt Mechanismen zur Verfügung, um diese Ereignisse zu verarbeiten und spezifischen Code als Reaktion auszuführen, wodurch Webanwendungen interaktiv und dynamisch werden.
Häufige Ereignistypen
Erklärung von addEventListener() und wie man Ereignis-Listener hinzufügt
Um auf Ereignisse in JavaScript zu reagieren, wird ein Ereignis-Listener an ein Element angehängt. Die gebräuchlichste Methode hierfür ist die Funktion addEventListener(), die auf bestimmte Ereignisse wartet und eine Funktion aufruft, wenn das Ereignis eintritt.
element.addEventListener('event', function, useCapture);
event: Der Typ des Ereignisses, auf das Sie hören möchten (z. B.'click','submit');function: Die Callback-Funktion, die ausgeführt wird, wenn das Ereignis ausgelöst wird;useCapture(optional): Ein Boolean, der angibt, ob das Ereignis während der Capturing- oder Bubbling-Phase erfasst werden soll (Standard istfalse, d. h. es wird während der Bubbling-Phase zugehört).
Click-Ereignis-Listener
Ein click-Ereignis-Listener wird an den Button angehängt. Beim Klicken wird eine Benachrichtigung ausgelöst.
index.html
index.css
index.js
Der Ereignis-Listener wird an das Element #myButton angehängt. Wenn der Benutzer auf die Schaltfläche klickt, erscheint ein Meldungsfenster mit dem Text "Button clicked!".
Submit-Ereignis-Listener
Ein Ereignis-Listener für das submit-Ereignis wird hinzugefügt, um das Standardverhalten der Formularübermittlung zu verhindern und die Daten mit JavaScript zu verarbeiten.
index.html
index.css
index.js
Ein Ereignis-Listener für das submit-Ereignis des Formulars verhindert die Standardübermittlung mit event.preventDefault(), sodass stattdessen benutzerdefiniertes JavaScript die Daten verarbeitet. Nach dem Absenden wird der eingegebene Name abgerufen und in einem Absatz mit der ID displayName angezeigt.
Keypress-Ereignis
Ein keypress-Ereignis-Listener wird an das Eingabefeld angehängt. Beim Drücken einer Taste wird diese im Absatz angezeigt.
index.html
index.css
index.js
Jedes Mal, wenn eine Taste beim Tippen in das Eingabefeld gedrückt wird, wird die gedrückte Taste in der Konsole protokolliert.
Praktisches Beispiel: Formularvalidierung beim Absenden
Logik für die Formularvalidierung vor dem Absenden des Formulars erstellen.
index.html
index.css
index.js
Der submit-Event-Listener stellt sicher, dass das Formular nicht abgeschickt wird, wenn die erforderlichen Felder leer sind. Sind entweder das Benutzername- oder das Passwortfeld leer, wird das Ereignis am Fortfahren gehindert und eine Fehlermeldung angezeigt.
1. Was ist der Zweck von addEventListener()?
2. Welche der folgenden ist KEIN gültiger Ereignistyp für addEventListener()?
Danke für Ihr Feedback!
