Елемент догађаја у објекту Event у JavaScript-у

Објекат Event такође омогућава да добијемо елемент у којем се догодио догађај. Овај елемент се налази у својству target. Зашто је ово потребно, ако се овај елемент налази у this?

Ствар је у томе што this увек садржи елемент, на који је везан догађај, а својство target - елемент, на који је стварно кликнуто. Овај стварни елемент може се поклапати са this, а може и да се не поклапа.

Хајде да погледамо на примеру. Нека имамо div, а унутар њега параграф:

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

Вежимо догађај за div, али кликнемо на параграф. Очигледно је да клик на параграф представља истовремено и клик на div, јер је параграф садржан у нашем div-у.

У описаном случају ће се испоставити да својство target садржи крајњи таг, у којем се догодио догађај - то јест параграф, а не div. Уверимо се у ово:

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // исписаће наш параграф
	console.log(this);         // исписаће наш div
});

Нека имате списак ul са таговима 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>

Вежите за таг ul руковалац клика. У овом руковаоцу проверавајте помоћу својства tagName, на ком тагу је кликнуто. Ако је клик био на тагу li - додајте на крај текста тог тага узвичник. А ако је клик био на тагу ul - испишите информацију о томе у конзолу.