Das Ereignisobjekt

Wenn der Browser einen Handler ausführt, gibt er der Funktion ein Argument mit: ein Objekt, das beschreibt, was gerade passiert ist. Es heißt Ereignisobjekt. Um es zu verwenden, gib dem Handler einen Parameter. Du kannst ihn nennen, wie du willst, üblich ist aber event:

const halloButton = document.querySelector("#hallo");

halloButton.addEventListener("click", function (event) {
    console.log(event.type);
    console.log(event.target);
});

Beim Button <button id="hallo">Hallo sagen</button> gibt ein Klick Folgendes aus:

click
<button id="hallo">Hallo sagen</button>

event.type ist der Name des Ereignisses, und event.target ist das Element, an dem es passiert ist, hier der Button, auf den geklickt wurde. Die Handler, die du in der vorigen Lektion geschrieben hast, hatten keinen Parameter. Der Browser hat ihnen das Ereignisobjekt trotzdem mitgegeben; sie haben es nur nicht benutzt.

Wozu brauchst du event.target, wenn der Button doch schon in einer Variable steht? Weil eine Funktion mehrere Elemente behandeln kann und event.target ihr sagt, welches sie gerade behandelt. Hier ist eine Abstimmung mit zwei Buttons und einem Handler:

const antwort = document.querySelector("#antwort");
const jaButton = document.querySelector("#ja");
const neinButton = document.querySelector("#nein");

function abstimmen(event) {
    antwort.textContent = `Du hast abgestimmt: ${event.target.textContent}`;
}

jaButton.addEventListener("click", abstimmen);
neinButton.addEventListener("click", abstimmen);

Ein Klick auf Ja zeigt Du hast abgestimmt: Ja, und ein Klick auf Nein zeigt Du hast abgestimmt: Nein. Die Funktion ist dieselbe, aber event.target ist jedes Mal der Button, auf den geklickt wurde. Wie du weißt, übergibst du die Funktion mit ihrem Namen, ohne Klammern: Der Browser ruft sie auf und gibt ihr das Ereignisobjekt.

event.target ist ein Element wie jedes andere, es hat also textContent, classList, style und alles andere, was du aus der vorigen Lektion kennst.