Das Event-Objekt
Lesen Sie Ereignisdetails wie target und type aus.
Das Event-Objekt ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.
Das Ereignisargument
Wenn ein Ereignis ausgelöst wird, übergibt der Browser Ihrem Handler ein Ereignisobjekt. Es enthält Details darüber, was passiert ist und welche Elemente beteiligt sind.
btn.addEventListener("click", (event) => {
console.log(event.type); // "click"
});event.type
event.type ist der Name des Ereignisses. Dadurch kann ein Handler auf verschiedene Ereignistypen unterschiedlich reagieren.
function handle(e) {
console.log("Got a " + e.type + " event");
}event.target
event.target ist das Element, von dem das Ereignis tatsächlich ausgegangen ist – also das tiefste Element, mit dem interagiert wurde.
list.addEventListener("click", (e) => {
console.log(e.target); // the exact clicked element
});event.currentTarget
event.currentTarget ist das Element, dessen Listener gerade ausgeführt wird – also das Element, für das Sie addEventListener aufgerufen haben.
list.addEventListener("click", (e) => {
console.log(e.currentTarget === list); // true
});target und currentTarget
Wenn Ereignisse nach oben weitergegeben werden, kann target ein untergeordnetes Element sein, während currentTarget auf das übergeordnete Element mit dem Listener verweist. Dieser Unterschied bildet die Grundlage der Ereignisdelegation.
list.addEventListener("click", (e) => {
// e.target = clicked <li>
// e.currentTarget = the <ul>
});Ereignisdelegation
Registrieren Sie einen Listener auf einem übergeordneten Element und verwenden Sie target.closest, um herauszufinden, auf welches untergeordnete Element reagiert wurde. Das skaliert besser als viele einzelne Listener.
list.addEventListener("click", (e) => {
const item = e.target.closest("li");
if (item) console.log(item.dataset.id);
});event.timeStamp
event.timeStamp erfasst, wann das Ereignis erstellt wurde, und eignet sich zum Messen der Zeitspannen zwischen Ereignissen.
btn.addEventListener("click", (e) => {
console.log(e.timeStamp);
});Koordinaten bei Mausereignissen
Mausereignisse enthalten Positionsdaten wie clientX/clientY (relativ zum Ansichtsfenster) und pageX/pageY (relativ zum Dokument).
area.addEventListener("click", (e) => {
console.log(e.clientX, e.clientY);
});Modifikatortasten
Eigenschaften wie e.shiftKey, e.ctrlKey, e.altKey und e.metaKey geben an, welche Modifikatortasten gedrückt gehalten wurden.
btn.addEventListener("click", (e) => {
if (e.shiftKey) console.log("Shift-click");
});event.isTrusted
event.isTrusted ist bei echten, von Benutzern ausgelösten Ereignissen true und bei von Skripten erstellten Ereignissen false. So können Sie echte Eingaben unterscheiden.
btn.addEventListener("click", (e) => {
console.log(e.isTrusted);
});Die gedrückte Taste auslesen
Tastaturereignisse stellen e.key bereit – das Zeichen oder den Namen der Taste –, sodass Sie auf bestimmte Tasten reagieren können.
input.addEventListener("keydown", (e) => {
if (e.key === "Enter") console.log("submit");
});Schnelltest
Unterscheiden Sie die beiden Ziele.
Zusammenfassung
Das Ereignisobjekt beschreibt das Ereignis: type, target (der Ausgangspunkt) und currentTarget (das Element mit dem Listener). Ihr Unterschied ermöglicht die Ereignisdelegation. Ereignisse stellen außerdem Koordinaten, Modifikatortasten, key, timeStamp und isTrusted bereit.
Lerne JavaScript mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 59
- Lektionen
- 200
Häufig gestellte Fragen
Ist die Lektion „Das Event-Objekt“ kostenlos?
Ja — der vollständige Text von „Das Event-Objekt“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Das Event-Objekt“?
Lesen Sie Ereignisdetails wie target und type aus. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um JavaScript Academy zu starten?
Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Das Event-Objekt“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?
Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Grundlagen von addEventListener
- Das Event-Objekt
- preventDefault und stopPropagation
- Tastatur- und Mausereignisse