Verständnis des Event-Objekts in JavaScript
Immer wenn ein Ereignis in JavaScript auftritt, wird dem Ereignis-Handler automatisch ein event-Objekt übergeben. Dieses Objekt enthält wichtige Informationen über das Ereignis, wie das Element, das es ausgelöst hat (target), den Typ des Ereignisses (type) sowie Methoden zur Steuerung des Ereignisverhaltens, wie preventDefault() und stopPropagation().
Zugriff auf ereignisbezogene Informationen
Das event-Objekt enthält mehrere nützliche Eigenschaften und Methoden, die den Zugriff auf Informationen über das Ereignis und die Interaktion damit ermöglichen.
target
Die Eigenschaft target bezieht sich auf das Element, das das Ereignis ausgelöst hat. Sie hilft dabei zu bestimmen, welches Element angeklickt, überfahren oder anderweitig angesprochen wurde.
index.html
index.css
index.js
event.target wird verwendet, um das spezifische angeklickte Button-Element zu identifizieren; dessen id wird im Absatz mit der ID display angezeigt.
type
Die Eigenschaft type gibt den Typ des aufgetretenen Ereignisses an (z. B. click, submit, keydown).
index.html
index.css
index.js
Der event.type wird im Absatz als Rückmeldung angezeigt und zeigt an, dass ein click-Ereignis stattgefunden hat. Außerdem wird beim Klicken auf die Schaltfläche die Hintergrundfarbe des gesamten Bodys auf lightblue geändert.
Methode preventDefault() im Event-Objekt
Die Methode preventDefault() verhindert das Standardverhalten eines Elements, wie zum Beispiel das Navigieren eines Links oder das Verhindern des Absenden eines Formulars.
index.html
index.css
index.js
Hier verhindert preventDefault() die Standardaktion (das Navigieren zu einer neuen Seite) beim Klicken auf den Link. Stattdessen wird eine Benachrichtigung angezeigt.
Praktisches Beispiel: Formularübermittlung behandeln und Verwendung des Event-Objekts
Validierung eines Formulars, Verhinderung der Übermittlung bei leeren Feldern sowie Anzeige der Formulardaten zusammen mit eventbezogenen Informationen wie target, type und wie preventDefault() die Standardübermittlung des Formulars verhindert.
index.html
index.css
index.js
Wenn das "Sign Up"-Formular abgeschickt wird, fängt ein Event Listener die Übermittlung mit event.preventDefault() ab. Ist entweder das Benutzername- oder das Passwortfeld leer, erscheint eine Fehlermeldung; andernfalls wird eine Erfolgsmeldung mit dem übermittelten Benutzernamen angezeigt. Zusätzlich werden Details zum Ereignis – wie Typ, Formular-ID und ob die Standardaktion verhindert wurde – in einem eigenen Abschnitt dargestellt. Das Formular wird anschließend für die weitere Nutzung zurückgesetzt.
1. Welche Information liefert die Eigenschaft event.target?
2. Warum könnte man event.preventDefault() bei einem Formular-Übermittlungsereignis verwenden?
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
Can you explain how to use event.target in a real example?
What other useful properties are available on the event object?
How does preventDefault() differ from stopPropagation()?
Awesome!
Completion rate improved to 2.22Verständnis des Event-Objekts in JavaScript
Swipe um das Menü anzuzeigen
Immer wenn ein Ereignis in JavaScript auftritt, wird dem Ereignis-Handler automatisch ein event-Objekt übergeben. Dieses Objekt enthält wichtige Informationen über das Ereignis, wie das Element, das es ausgelöst hat (target), den Typ des Ereignisses (type) sowie Methoden zur Steuerung des Ereignisverhaltens, wie preventDefault() und stopPropagation().
Zugriff auf ereignisbezogene Informationen
Das event-Objekt enthält mehrere nützliche Eigenschaften und Methoden, die den Zugriff auf Informationen über das Ereignis und die Interaktion damit ermöglichen.
target
Die Eigenschaft target bezieht sich auf das Element, das das Ereignis ausgelöst hat. Sie hilft dabei zu bestimmen, welches Element angeklickt, überfahren oder anderweitig angesprochen wurde.
index.html
index.css
index.js
event.target wird verwendet, um das spezifische angeklickte Button-Element zu identifizieren; dessen id wird im Absatz mit der ID display angezeigt.
type
Die Eigenschaft type gibt den Typ des aufgetretenen Ereignisses an (z. B. click, submit, keydown).
index.html
index.css
index.js
Der event.type wird im Absatz als Rückmeldung angezeigt und zeigt an, dass ein click-Ereignis stattgefunden hat. Außerdem wird beim Klicken auf die Schaltfläche die Hintergrundfarbe des gesamten Bodys auf lightblue geändert.
Methode preventDefault() im Event-Objekt
Die Methode preventDefault() verhindert das Standardverhalten eines Elements, wie zum Beispiel das Navigieren eines Links oder das Verhindern des Absenden eines Formulars.
index.html
index.css
index.js
Hier verhindert preventDefault() die Standardaktion (das Navigieren zu einer neuen Seite) beim Klicken auf den Link. Stattdessen wird eine Benachrichtigung angezeigt.
Praktisches Beispiel: Formularübermittlung behandeln und Verwendung des Event-Objekts
Validierung eines Formulars, Verhinderung der Übermittlung bei leeren Feldern sowie Anzeige der Formulardaten zusammen mit eventbezogenen Informationen wie target, type und wie preventDefault() die Standardübermittlung des Formulars verhindert.
index.html
index.css
index.js
Wenn das "Sign Up"-Formular abgeschickt wird, fängt ein Event Listener die Übermittlung mit event.preventDefault() ab. Ist entweder das Benutzername- oder das Passwortfeld leer, erscheint eine Fehlermeldung; andernfalls wird eine Erfolgsmeldung mit dem übermittelten Benutzernamen angezeigt. Zusätzlich werden Details zum Ereignis – wie Typ, Formular-ID und ob die Standardaktion verhindert wurde – in einem eigenen Abschnitt dargestellt. Das Formular wird anschließend für die weitere Nutzung zurückgesetzt.
1. Welche Information liefert die Eigenschaft event.target?
2. Warum könnte man event.preventDefault() bei einem Formular-Übermittlungsereignis verwenden?
Danke für Ihr Feedback!
