Das Ereignisobjekt

Wann immer ein Ereignis in JavaScript auftritt, wird ein event-Objekt automatisch an den Ereignishandler übergeben. Dieses Objekt enthält wichtige Informationen über das Ereignis, wie das Element, das es ausgelöst hat (target), die Art des Ereignisses (type) und Methoden zur Steuerung des Verhaltens des Ereignisses, wie preventDefault() und stopPropagation().

Zugriff auf ereignisbezogene Informationen

Das event-Objekt enthält mehrere nützliche Eigenschaften und Methoden, die es Ihnen ermöglichen, Informationen über das Ereignis zu erhalten und mit ihm zu interagieren.

target

Die target-Eigenschaft bezieht sich auf das Element, das das Ereignis ausgelöst hat. Sie hilft uns zu bestimmen, welches Element angeklickt, überfahren oder interagiert wurde.

event.target wird verwendet, um den spezifischen Button zu identifizieren, der geklickt wurde, und seine id wird im Absatz mit der ID display angezeigt.

type

Die type-Eigenschaft gibt den Typ des Ereignisses an, das aufgetreten ist (z.B. click, submit, keydown).

Der event.type wird im Absatz zur Rückmeldung angezeigt und zeigt, dass ein click-Ereignis aufgetreten ist. Außerdem wird beim Klicken auf die Schaltfläche die Hintergrundfarbe des gesamten Körpers auf lightblue geändert.

preventDefault() Methode im Event-Objekt

Die preventDefault()-Methode stoppt das Standardverhalten eines Elements, wie das Stoppen eines Links vom Navigieren oder das Verhindern, dass ein Formular gesendet wird.

Hier verhindert preventDefault() die Standardaktion (das Navigieren zu einer neuen Seite) beim Klicken auf den Link. Stattdessen wird ein Alarm angezeigt.

Praktisches Beispiel: Umgang mit Formularübermittlung und Verwendung des Ereignisobjekts

Lassen Sie uns ein Formular validieren, die Übermittlung verhindern, wenn Felder leer sind, und die Daten des Formulars zusammen mit ereignisbezogenen Informationen wie target, type und wie preventDefault() die Standardformularübermittlung verhindert, anzeigen.

Wenn das "Sign Up"-Formular abgeschickt wird, fängt ein Event-Listener die Übermittlung mit event.preventDefault() ab. Wenn entweder das Benutzername- oder das Passwortfeld leer ist, wird eine Fehlermeldung angezeigt; andernfalls erscheint eine Erfolgsmeldung, die den übermittelten Benutzernamen zeigt. Zusätzlich werden Details über das Ereignis—wie Typ, Formular-ID und ob die Standardaktion verhindert wurde—in einem speziellen Abschnitt angezeigt. Das Formular wird dann für die weitere Verwendung zurückgesetzt.