Prvek události v objektu Event v JavaScriptu

Objekt Event také umožňuje získat prvek, ve kterém došlo k události. Tento prvek je obsažen ve vlastnosti target. K čemu to je, když je tento prvek obsažen v this?

Věc se má tak, že this vždy obsahuje prvek, ke kterému byla událost připnuta, zatímco vlastnost target - prvek, na který se skutečně kliklo. Tento skutečný prvek se může shodovat s this, ale také nemusí.

Podívejme se na příklad. Předpokládejme, že máme div a uvnitř něj odstavec:

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

Připojme událost k divu, ale klikněme na odstavec. Je zřejmé, že kliknutí na odstavec představuje současně i kliknutí na div, protože odstavec je obsažen v našem divu.

V popsaném případě se stane, že vlastnost target bude obsahovat koncový tag, ve kterém došlo k události - tedy odstavec, a ne div. Přesvědčme se o tom:

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

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

Předpokládejme, že máte seznam ul s tagy 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>

Připojte k tagu ul obslužnou rutinu kliknutí. V této obslužné rutině zkontrolujte pomocí vlastnosti tagName, na který tag bylo kliknuto. Pokud bylo kliknuto na tag li - přidejte na konec textu tohoto tagu vykřičník. A pokud bylo kliknuto na tag ul - vypište informaci o tom do konzole.