Das Event-Objekt

Wenn ein Event ausgelöst wird, übergibt der Browser automatisch ein Event-Objekt an deine Funktion. Darin findest du Informationen zum Event – zum Beispiel welches Element geklickt wurde oder wie du das Standard-Verhalten stoppen kannst.

Das Event-Objekt kennenlernen

In deinem Event Handler kannst du das Event-Objekt als Parameter entgegennehmen. Oft nennst du es event oder e.

Mit event.type siehst du, welches Event ausgelöst wurde – zum Beispiel click oder submit.

1const button = document.getElementById("meinButton");
2
3button.addEventListener("click", function(event) {
4    console.log(event);
5    console.log(event.type);
6});

event.target und event.currentTarget

Wenn du auf ein Element klickst, passiert oft mehr, als auf den ersten Blick sichtbar ist. Der Klick trifft genau ein Element – aber dein JavaScript lauscht manchmal auf einem anderen Element in der Nähe, zum Beispiel auf einer Karte, die einen Button enthält.

Genau hier helfen dir event.target und event.currentTarget. Beide zeigen dir, welches Element am Event beteiligt ist – aber aus zwei unterschiedlichen Perspektiven.

event.target – Wo wurde wirklich geklickt?

event.target ist das Element, das das Event ausgelöst hat. Das ist immer das Element, das der Nutzer direkt angeklickt hat – also zum Beispiel der Button, der Text in der Karte oder die Karte selbst.

Merke dir: target = das geklickte Element.

event.currentTarget – Wo hängt der Listener?

event.currentTarget ist das Element, an dem dein addEventListener registriert wurde. Also das Element, dessen Funktion gerade ausgeführt wird.

Merke dir: currentTarget = das Element mit dem Event Listener.

Beispiel: Karte mit Button

Stell dir eine Karte vor, die einen Like-Button enthält. Du hängst den Listener an die Karte – nicht an den Button:

1<div id="karte" class="karte">
2    <button id="likeButton">Like</button>
3</div>

1const karte = document.getElementById("karte");
2
3karte.addEventListener("click", function(event) {
4    console.log("target:", event.target);
5    console.log("currentTarget:", event.currentTarget);
6});

Was passiert jetzt beim Klick?

• Klick auf den Button: target ist der Button, currentTarget ist die Karte
• Klick auf den Text in der Karte: target ist der Text (z. B. ein p-Element), currentTarget ist die Karte
• Klick auf einen leeren Bereich der Karte: target und currentTarget sind beide die Karte

preventDefault()

Manche Elemente haben ein Standard-Verhalten. Ein Formular wird beim Absenden neu geladen, ein Link öffnet eine neue Seite.

Mit event.preventDefault() kannst du dieses Verhalten stoppen und stattdessen dein eigenes JavaScript ausführen.

1<form id="newsletterForm">
2    <input type="email" id="email" placeholder="E-Mail">
3    <button type="submit">Anmelden</button>
4</form>

1const formular = document.getElementById("newsletterForm");
2
3formular.addEventListener("submit", function(event) {
4    event.preventDefault();
5    console.log("Formular wurde abgefangen – Seite lädt nicht neu.");
6});

stopPropagation()

Events blubbern oft nach oben durch – vom geklickten Element zu seinen Eltern. Wenn sowohl Button als auch Karte einen Listener haben, würden beide ausgelöst.

Mit event.stopPropagation() stopst du dieses Weitergeben. Dann reagiert nur noch der Listener des geklickten Elements.

1<div id="karte" class="karte">
2    <button id="detailsButton">Details</button>
3</div>

1const karte = document.getElementById("karte");
2const detailsButton = document.getElementById("detailsButton");
3
4karte.addEventListener("click", function() {
5    console.log("Karte wurde geklickt");
6});
7
8detailsButton.addEventListener("click", function(event) {
9    event.stopPropagation();
10    console.log("Nur der Button wurde geklickt");
11});