Objekt události

Když prohlížeč spouští obsluhu, předá funkci argument: objekt, který popisuje, co se právě stalo. Říká se mu objekt události. Abyste ho mohli použít, dejte obsluze parametr. Pojmenovat ho můžete, jak chcete, obvykle se ale jmenuje event (anglicky událost):

const tlacitkoAhoj = document.querySelector("#ahoj");

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

S tlačítkem <button id="ahoj">Pozdravit</button> kliknutí vypíše:

click
<button id="ahoj">Pozdravit</button>

event.type je název události a event.target prvek, ve kterém se stala, tady tlačítko, na které se kliklo. Obsluhy, které jste psali v minulé lekci, žádný parametr neměly. Prohlížeč jim objekt události předal taky, jen ho nepoužily.

K čemu je event.target, když tlačítko už máte v proměnné? Jedna funkce totiž může obsluhovat víc prvků a event.target jí řekne, který z nich právě obsluhuje. Tady je anketa se dvěma tlačítky a jednou obsluhou:

const odpoved = document.querySelector("#odpoved");
const tlacitkoAno = document.querySelector("#ano");
const tlacitkoNe = document.querySelector("#ne");

function hlasovat(event) {
    odpoved.textContent = `Váš hlas: ${event.target.textContent}`;
}

tlacitkoAno.addEventListener("click", hlasovat);
tlacitkoNe.addEventListener("click", hlasovat);

Kliknutí na Ano ukáže Váš hlas: Ano a kliknutí na Ne ukáže Váš hlas: Ne. Funkce je pořád stejná, ale event.target je pokaždé to tlačítko, na které se kliklo. Jak už víte, funkci předáváte jejím názvem, bez závorek: zavolá ji prohlížeč a předá jí objekt události.

event.target je prvek jako každý jiný, takže má textContent, classList, style a všechno ostatní, co znáte z minulé lekce.