Element događaja u Event objektu u JavaScript-u

Objektat Event takođe omogućava da dobijemo element u kojem se događaj desio. Ovaj element se nalazi u svojstvu target. Zašto je ovo potrebno, ako se ovaj element nalazi u this?

Stvar je u tome što this uvek sadrži element, na koji je događaj bio vezan, dok svojstvo target - element na koji je stvarno kliknuto. Ovaj stvarni element može se poklopiti sa this, a može i ne.

Pogledajmo na primeru. Neka imamo div, a unutar njega paragraf:

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

Povežimo događaj na div, ali kliknimo na paragraf. Očigledno je da klik na paragraf predstavlja istovremeno i klik na div, jer se paragraf nalazi u našem divu.

U opisanom slučaju će se pokazati da svojstvo target sadrži krajnji tag, u kojem se desio događaj - odnosno paragraf, a ne div. Uverimo se u ovo:

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // ispisaće naš paragraf
	console.log(this);         // ispisaće naš div
});

Neka imate listu ul sa tagovima 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>

Povežite na tag ul handler klika. U ovom handleru proverite pomoću svojstva tagName, na koji tag je kliknuto. Ako je klik bio na tagu li - dodajte na kraj teksta ovog taga uzvičnik. A ako je klik bio na tag ul - ispišite informaciju o ovome u konzolu.