Einführung in Ereignisse und Ereignis-Listener

Was sind Ereignisse in JavaScript?

JavaScript bietet Mechanismen, um diese Ereignisse zu handhaben und spezifischen Code als Reaktion auszuführen, wodurch Ihre Webanwendung interaktiv und dynamisch wird.

Häufige Ereignistypen

Erklärung von addEventListener() und wie man Ereignis-Listener anhängt

Um auf Ereignisse in JavaScript zu reagieren, hängt man einen Ereignis-Listener an ein Element an. Die gebräuchlichste Methode, dies zu tun, ist die addEventListener() Funktion, die auf bestimmte Ereignisse hört und eine Funktion aufruft, wenn das Ereignis eintritt.

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 boolescher Wert, der angibt, ob das Ereignis während der Capturing- oder Bubbling-Phase erfasst werden soll (Standard ist false, was bedeutet, dass es während der Bubbling-Phase hört).

Click-Ereignis-Listener

Lassen Sie uns einen click-Ereignis-Listener an den Button anhängen. Beim Klicken wird ein Alarm ausgelöst.

index.html

index.css

index.js

Der Ereignis-Listener ist an das #myButton-Element angehängt, und wenn der Benutzer auf die Schaltfläche klickt, erscheint ein Nachrichtenfeld mit dem Text "Button clicked!"

Submit-Ereignis-Listener

Lassen Sie uns einen Ereignis-Listener für das submit-Ereignis hinzufügen, um das Standardverhalten der Formularübermittlung zu verhindern und die Daten mit JavaScript zu verarbeiten.

index.html

index.css

index.js

Ein Event-Listener für das submit-Ereignis des Formulars verhindert die standardmäßige Übermittlung mit event.preventDefault(), sodass benutzerdefiniertes JavaScript die Daten stattdessen verarbeiten kann. Bei der Übermittlung wird der eingegebene Name abgerufen und in einem Absatz mit der ID displayName angezeigt.

Keypress-Ereignis

Lassen Sie uns einen keypress-Event-Listener an das Eingabefeld anhängen. Wenn eine Taste gedrückt wird, wird sie im Absatz angezeigt.

index.html

index.css

index.js

Jedes Mal, wenn eine Taste gedrückt wird, während in das Eingabefeld getippt wird, wird die gedrückte Taste in der Konsole protokolliert.

Praktisches Beispiel: Formularvalidierung beim Absenden behandeln

Lassen Sie uns eine Logik für die Formularvalidierung vor dem Absenden des Formulars erstellen.

index.html

index.css

index.js

Der submit-Ereignis-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 daran gehindert, fortzufahren, und eine Fehlermeldung wird angezeigt.