Element udalosti v objekte Event v JavaScript

Objekt Event tiež umožňuje získať element, v ktorom udalosť nastala. Tento element je obsiahnutý vo vlastnosti target. Načo je to potrebné, keď je tento element obsiahnutý v this?

Vec sa má tak, že this vždy obsahuje element, ku ktorému bola událosť pripojená, zatiaľ čo vlastnosť target - element, na ktorý sa skutočne kliklo. Tento skutočný element sa môže zhodovať s this, alebo nemusí.

Pozrime sa na príklad. Predpokladajme, že máme div a v ňom odsek:

<div id="elem">
	<p>text</p>
</div>

Pripojíme udalosť k divu, ale klikneme na odsek. Je zrejmé, že kliknutie na odsek predstavuje súčasne aj kliknutie na div, pretože odsek je obsiahnutý v našom dive.

V opísanom prípade to znamená, že vlastnosť target bude obsahovať konečný tag, v ktorom udalosť nastala - teda odsek, a nie div. Presvedčme sa o tom:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function(event) {
	console.log(event.target); // vypíše náš odsek
	console.log(this);         // vypíše náš div
});

Predpokladajme, že máte zoznam ul s tagmi li:

ul {
	padding: 30px;
	border: 1px solid red;
}
li {
	list-style-type: none;
	margin-bottom: 20px;
	border: 1px dashed black;
}

<ul id="elem">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Pripojte k tagu ul obslužný program kliknutia. V tomto obslužnom programe skontrolujte pomocou vlastnosti tagName, na ktorý tag sa kliklo. Ak bolo kliknutie na tag li - pridajte na koniec textu tohto tagu výkričník. A ak bolo kliknutie na tag ul - vypíšte informáciu o tom do konzoly.