Sündmuse element Event objekti JavaScriptis

Objekt Event võimaldab ka saada elementi, kus sündmus toimus. See element sisaldub omaduses target. Miks seda vaja on, kui see element sisaldub this-is?

Asi on selles, et tegelikult this sisaldab alati elementi, millele sündmus oli seotud, kuid omadus target - elementi, mida tegelikult klõpsati. See tegelik element võib kattuda this-ga, aga võib ka mitte kattuda.

Vaatame näidet. Olgu meil div ja selle sees lõik:

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

Seome sündmuse div-ile, kuid klõpsame lõigul. Ilmselgelt esindab lõigu klõpsamine samal ajal ka div-i klõpsamist, kuna lõik sisaldub meie div-is.

Kirjeldatud juhul selgub, et omadus target sisaldab lõplikku silti, milles sündmus toimus - see tähendab lõiku, mitte div-i. Veendume selles:

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // väljastab meie lõigu
	console.log(this);         // väljastab meie div-i
});

Olgu teil loend ul siltidega 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>

Seoge silti ul klõpsu töötleja. Selles töötlejas kontrollige omaduse tagName abil, mille sildi peale klõpsati. Kui klõps toimus sildi li peale - lisage selle sildi teksti lõppu hüüumärk. Kui klõps toimus sildi ul peale - väljastage teave sellest konsooli.