Element dogodka v objektu Event v JavaScript

Objekt Event prav tako omogoča pridobitev elementa, v katerem se je dogodek zgodil. Ta element je vsebovan v lastnosti target. Zakaj je to potrebno, če je ta element vsebovan v this?

Bistvo je v tem, da this vedno vsebuje element, na katerega je bil dogodek vezan, medtem ko lastnost target vsebuje element, na katerega je bil dejansko klik. Ta dejanski element lahko sovpada z this, lahko pa tudi ne.

Poglejmo si primer. Recimo, da imamo div, znotraj njega pa odstavek:

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

Povežimo dogodek z div, vendar kliknimo na odstavek. Očitno je, da klik na odstavek predstavlja hkrati tudi klik na div, saj je odstavek vsebovan v našem divu.

V opisanem primeru se bo izkazalo, da lastnost target vsebuje končno oznako, v kateri se je zgodil dogodek - to je odstavek, in ne div. Prepričajmo se v to:

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

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

Recimo, da imate seznam ul z oznakami 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 z oznako ul obravnavalnik klika. V tem obravnavalniku preverite s pomočjo lastnosti tagName, na katero oznako je bil klik. Če je bil klik na oznako li - dodajte na konec besedila te oznake klicaj. Če pa je bil klik na oznako ul - izpišite informacijo o tem v konzolo.