Das Event-Objekt
An der Museumswand hängt eine Tafel. Der äußere Kasten ist #wall. Darin hält #plaque einen Link, #seal. Auf dem Link steht open, href ist /wing. Unter der Wand sagt #slip noch blank.
Der Browser gibt der Funktion ein Objekt. Der Parameter heißt event. event.type ist die Art des Ereignisses. Ein Klick setzt diese Zeichenkette auf click. event.target ist das Element, auf dem der Klick landete. event.currentTarget ist das Element, an dem dieser Listener sitzt. Die beiden sind nur gleich, wenn Klick und Listener dasselbe Element teilen.
Das Siegel ist ein Link. preventDefault bricht den Sprung nach /wing ab. Danach ist event.defaultPrevented true. Ohne den Aufruf bleibt das Flag false. Der Klick wandert dann nach außen: Siegel, Tafel, Wand. stopPropagation auf der Tafel schneidet den Weg ab, der Listener an der Wand läuft nicht.
Das Skript der Seite klickt das Siegel einmal. Die Zeile unter der Tafel lautet click / seal / plaque / true / quiet. Hier wird kein onclick gesetzt, removeEventListener nicht aufgerufen, und kein Element erzeugt.
Das Objekt, das der Browser übergibt
Die vorige Seite war der Garderobenhaken. wool und silk hatten keinen Parameter und konnten dieses Objekt nicht lesen. Ihre Zeile war wool silk / 2 / peg. Die Klingelseite setzte onclick und las this. Diese Seite nicht. getElementById gibt nur Wand, Tafel, Siegel und Zettel.
addEventListener speichert die Funktion nur. Das Objekt kommt, wenn der Klick die Funktion ausführt, nicht beim Hinzufügen. currentTarget liest du in der Funktion. Nach der Rückkehr ist die Eigenschaft null.
Was ein Klick meldet
Der Zettel beginnt mit blank. Der Linktext bleibt open. Lies die Zeilen der Reihe nach. Jedes Stück startet mit dieser frischen Wand, außer der Seitenzeile: das ist die Demo unten. Die Demo ruft removeEventListener nicht auf.
📊 Was ein Klick meldet
| Moment | Was du liest | Zetteltext | Leicht verwechselt |
|---|---|---|---|
Listener am Siegel, seal.click(), Typ lesen |
event.type |
click | die Id als Typ lesen |
| Listener an der Tafel, Klick aufs Siegel, target | event.target.id |
seal | currentTarget lesen |
| derselbe Klick, currentTarget | event.currentTarget.id |
plaque | target lesen |
preventDefault am Siegel, dann das Flag |
event.defaultPrevented |
true | der Link geht trotzdem |
kein preventDefault |
event.defaultPrevented |
false | jeder Listener bricht den Link ab |
stopPropagation an der Tafel, Wand hört auch |
marks verbunden | plaque | plaque wall erwarten |
Seitenskript, ein click |
die Zeile | click / seal / plaque / true / quiet | die Zeile endet mit wall |
Ein Klick auf das Siegel ist ein Objekt. Jeder Listener auf dem Weg sieht dasselbe. type ändert sich nicht. target ändert sich nicht. currentTarget schon: es ist das Element, dessen Listener gerade läuft.
preventDefault spricht mit der Standardaktion des Browsers. Bei diesem Link ist das das Folgen von /wing. Der Aufruf nimmt keinen Listener von der Liste. stopPropagation spricht mit dem Weg. Es bricht den Link nicht ab. Wer das eine aufruft, hat das andere nicht aufgerufen.
join(" ") setzt nur ein Leerzeichen zwischen Wörter, die schon in marks stehen. Eine leere Liste wird hier nicht verbunden. Der Zettel beginnt mit dem Wort blank und ändert sich nur in einem Listener oder im Seitenskript nach dem Klick.
Der Typ
Der Listener sitzt am Siegel. Die Funktion nennt den Parameter event und schreibt event.type auf den Zettel. Danach läuft seal.click().
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function readType(event) {
slip.textContent = event.type;
}
seal.addEventListener("click", readType);
seal.click();
console.log(slip.textContent);
Die Ausgabe ist click. Der Typ ist die Art des Ereignisses, nicht die Id und nicht das Wort open.
Das Element unter dem Klick
Frische Wand. Der Listener sitzt an der Tafel, nicht am Siegel. Der Klick landet trotzdem auf dem Siegel. event.target ist dieses Element, also ist event.target.id seal.
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function readTarget(event) {
slip.textContent = event.target.id;
}
plaque.addEventListener("click", readTarget);
seal.click();
console.log(slip.textContent);
Die Ausgabe ist seal. Das Element des Listeners ist die Tafel. target nennt nicht die Tafel. Es nennt das Element unter dem Klick.
Wo der Listener sitzt
Dieselbe frische Wand, Listener weiter an der Tafel, Klick weiter auf dem Siegel. Der Zettel schreibt beide Ids, zuerst target, dann currentTarget.
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function readWhere(event) {
slip.textContent = event.target.id + " " + event.currentTarget.id;
}
plaque.addEventListener("click", readWhere);
seal.click();
console.log(slip.textContent);
Die Ausgabe ist seal plaque. Das erste Wort ist der Klick. Das zweite ist das Element, dem dieser Listener gehört. Sitzt der Listener am Siegel und du klickst das Siegel, sind beide Ids seal, weil Klick und Listener ein Element teilen. Diese Lesart nutzt die Tafel, deshalb unterscheiden sich die Ids. currentTarget liest du in der Funktion. Danach ist es null.
Den Link abbrechen
Das href des Siegels ist /wing. Die Standardaktion dieses Klicks ist, dem Link zu folgen. preventDefault bricht diese Aktion ab. Den Listener entfernt es nicht. Direkt nach dem Aufruf ist event.defaultPrevented true.
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function hold(event) {
event.preventDefault();
slip.textContent = String(event.defaultPrevented);
}
seal.addEventListener("click", hold);
seal.click();
console.log(slip.textContent);
Die Ausgabe ist true. Ohne preventDefault ist dieselbe Lesung false. Der Zettel sagt false, und die Standardaktion des Links bleibt. stopPropagation setzt dieses Flag nicht.
Der Klick wandert nach außen
Das Siegel liegt in der Tafel, die Tafel in der Wand. Ein Klick auf das Siegel erreicht den Tafel-Listener, dann den Wand-Listener, sofern der Weg nicht abgeschnitten wird. stopPropagation an der Tafel schneidet ihn ab. Die Wand-Funktion läuft nicht. preventDefault schneidet den Weg nicht ab.
let wall = document.getElementById("wall");
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
let marks = [];
function onPlaque(event) {
marks.push("plaque");
event.stopPropagation();
}
function onWall() {
marks.push("wall");
}
plaque.addEventListener("click", onPlaque);
wall.addEventListener("click", onWall);
seal.click();
slip.textContent = marks.join(" ");
console.log(slip.textContent);
Die Ausgabe ist plaque. Das Wort wall kommt nicht in die marks. Ohne stopPropagation schriebe derselbe Klick plaque wall. Die Demo unten schneidet den Weg ab und bricht den Link ab.
Eine Zeile unter der Tafel
Das Skript steht am Ende des body, nachdem Wand und Absätze da sind. Der Siegel-Listener ruft preventDefault. Der Tafel-Listener ruft stopPropagation und merkt sich Typ, target-Id, currentTarget-Id und das Flag. Der Wand-Listener würde heard auf wall setzen, aber der Weg ist schon abgeschnitten, also bleibt heard quiet. Die Zeile wird nach seal.click() geschrieben, wenn die Wand ihre Chance hatte.
<!DOCTYPE html>
<html>
<head>
<title>event-object — page</title>
</head>
<body>
<div id="wall">
<div id="plaque">
<a id="seal" href="/wing">open</a>
</div>
</div>
<p id="slip">blank</p>
<p id="line">…</p>
<script>
let wall = document.getElementById("wall");
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
let kind = "";
let from = "";
let on = "";
let held = "";
let heard = "quiet";
seal.addEventListener("click", function (event) {
event.preventDefault();
});
plaque.addEventListener("click", function (event) {
event.stopPropagation();
kind = event.type;
from = event.target.id;
on = event.currentTarget.id;
held = String(event.defaultPrevented);
});
wall.addEventListener("click", function () {
heard = "wall";
});
seal.click();
slip.textContent = kind + " " + from + " " + on;
document.getElementById("line").textContent =
kind + " / " + from + " / " + on + " / " + held + " / " + heard;
</script>
</body>
</html>
Die Zeile lautet click / seal / plaque / true / quiet. Der Typ ist click. Die target-Id ist seal. Die currentTarget-Id ist plaque, weil dieser Listener an der Tafel sitzt. Das Flag ist true, weil der Siegel-Listener preventDefault rief, bevor die Tafel es las. Das letzte Wort ist quiet, nicht wall, weil stopPropagation an der Tafel lief. Der Linktext open steht nicht in der Zeile. Der Zettel wird click seal plaque. Die nächste Seite ist Delegation. Das Siegel steht schon im Markup. Hier kommt nach dem Listener kein neues Kind dazu.
Fünf Prüfungen an der Tafel
- Listener ans Siegel, dann klicken. Der Zettel ist click.
- Listener an die Tafel, Siegel klicken,
event.target.idlesen. Der Zettel ist seal. - Derselbe Listener schreibt beide Ids. Der Zettel ist seal plaque. Ein Listener am Siegel selbst schriebe seal seal.
preventDefaultaufrufen, dannevent.defaultPreventedlesen. Der Zettel ist true. Ohne den Aufruf ist er false.stopPropagationan der Tafel, die Wand hört mit. Die marks werden zu plaque. Lies die Zeile: click / seal / plaque / true / quiet.
Wo diese Tafel täuscht
Auf dem Link steht weiter open. Der Zettel ist nicht der Linktext.
- Erwarten, das Funktionsargument sei das Siegel-Element und nicht das Ereignisobjekt
event.targetlesen, wenn du das Element des Listeners wolltestevent.currentTargetlesen, wenn du das Element unter dem Klick wolltest- Erwarten,
preventDefaultentferne den Listener, so wieremoveEventListeneram Haken - Erwarten,
stopPropagationbreche den Sprung nach/wingab - Erwarten, der Wand-Listener laufe noch nach
stopPropagationan der Tafel event.currentTargetnach der Rückkehr lesen und plaque erwartenonclicksetzen oderthisundtypeof nulllesen; das war die Klingel- Den Link mit
createElementbauen; das war eine frühere Seite - Die Zeile so lesen, als ende sie mit wall, oder als wool silk / 2 / peg
Was bleibt
event.typenach einem Klick ist click- Listener an der Tafel, Klick aufs Siegel:
event.target.idist seal - Bei demselben Klick ist
event.currentTarget.idplaque - Listener am Siegel: target und currentTarget sind beide seal
preventDefaultsetztevent.defaultPreventedauf true, ohne den Aufruf bleibt falsestopPropagationan der Tafel lässt den Wand-Listener nicht laufen- Die Zeile lautet click / seal / plaque / true / quiet
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt