Elementul evenimentului în obiectul Event în JavaScript

Obiectul Event permite, de asemenea, obținerea elementului în care a avut loc evenimentul. Acest element este conținut în proprietatea target. De ce este necesar acest lucru, dacă acest element este conținut în this?

Faptul este că, în realitate, this conține întotdeauna elementul, căruia i-a fost atașat evenimentul, iar proprietatea target - elementul pe care s-a făcut clic efectiv. Acest element real poate coincide cu this, dar poate și să nu coincidă.

Să ne uităm la un exemplu. Să presupunem că avem un div, iar în interiorul lui un paragraf:

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

Să atașăm evenimentul div-ului, dar să dăm clic pe paragraf. Evident, clicul pe paragraf reprezintă în același timp și un clic pe div, deoarece paragraful este conținut în div-ul nostru.

În cazul descris, se va întâmpla ca proprietatea target să conțină tag-ul final, în care a avut loc evenimentul - adică paragraful, și nu div-ul. Să ne convingem de acest lucru:

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // va afișa paragraful nostru
	console.log(this);         // va afișa div-ul nostru
});

Să presupunem că aveți o listă ul cu tag-uri 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>

Atașați tag-ului ul un handler de clic. În acest handler verificați cu ajutorul proprietății tagName, pe ce tag s-a făcut clic. Dacă clicul a fost pe tag-ul li - adăugați la sfârșitul textului acelui tag un semn de exclamare. Iar dacă clicul a fost pe tag-ul ul - afișați informația despre aceasta în consolă.