Įvykio elementas Event objekte JavaScript

Objektas Event taip pat leidžia gauti elementą, kuriame įvyko įvykis. Šis elementas yra savybėje target. Kam to reikia, jei šis elementas yra this?

Faktas yra tas, kad this visada turi elementą, prie kurio buvo pririštas įvykis, o savybė target - elementą, kuriame buvo realus paspaudimas. Šis realus elementas gali sutapti su this, o gali ir nesutapti.

Pažiūrėkime pavyzdžiu. Tarkime, mes turime div, o jo viduje pastraipą:

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

Pririškime įvykį prie div, bet paspauskime ant pastraipos. Akivaizdu, kad paspaudimas ant pastraipą reiškia kartu ir paspaudimą ant div, nes pastraipa yra mūsų dive.

Aprašytu atveju pasirodys, kad savybė target turės galutinę žymą, kurioje įvyko įvykis - tai yra pastraipą, o ne div. Įsitikinkime tuo:

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // atspausdins mūsų pastraipą
	console.log(this);         // atspausdins mūsų div
});

Tarkime, jūs turite sąrašą ul su žymėmis 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>

Pririškite prie ul žymės paspaudimo apdorotoją. Šiame apdorotoje patikrinkite naudodami savybę tagName, ant kurios žymės buvo paspausta. Jei paspaudimas buvo ant li žymės - pridėkite prie šios žymės teksto pabaigos šauktuką. O jei paspaudimas buvo ant ul žymės - išveskite informaciją apie tai į konsolę.