Einführung in Ereignisse und Ereignis-Listener

Was sind Ereignisse in JavaScript?

JavaScript bietet Mechanismen zur Verarbeitung dieser Ereignisse und zur Ausführung bestimmter Codes als Reaktion darauf, wodurch Ihre Webanwendung interaktiv und dynamisch wird.

Häufige Ereignistypen

Erklärung von addEventListener() und wie man Event Listener hinzufügt

Um auf Ereignisse in JavaScript zu reagieren, wird ein Event 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 gehört werden soll (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 ist false, d. h. es wird während der Bubbling-Phase gehört).

Click-Event Listener

Ein click-Event Listener wird an den Button angehängt. Beim Klicken wird eine Alert-Meldung ausgelöst.

Der Ereignis-Listener ist 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

Hinzufügen eines Ereignis-Listeners für das submit-Ereignis, um das Standardverhalten der Formularübermittlung zu verhindern und die Daten mit JavaScript zu verarbeiten.

Ein Ereignis-Listener für das submit-Ereignis des Formulars verhindert die Standardübermittlung mit event.preventDefault(), sodass stattdessen benutzerdefiniertes JavaScript die Daten verarbeitet. Beim 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. Wenn eine Taste gedrückt wird, erscheint sie im Absatz.

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.

Der submit-Event-Listener stellt sicher, dass das Formular nicht abgeschickt wird, wenn die erforderlichen Felder leer sind. Wenn entweder das Benutzername- oder das Passwortfeld leer ist, wird das Ereignis verhindert und eine Fehlermeldung angezeigt.