Elemento evento nell'oggetto Event in JavaScript

L'oggetto Event permette anche di ottenere l'elemento in cui si è verificato l'evento. Questo elemento è contenuto nella proprietà target. Perché è necessario, se questo elemento è contenuto in this?

Il fatto è che this contiene sempre l'elemento a cui era collegato l'evento, mentre la proprietà target - l'elemento su cui è stato effettivamente cliccato. Questo elemento reale può coincidere con this, oppure no.

Vediamo un esempio. Supponiamo di avere un div, e al suo interno un paragrafo:

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

Colleghiamo l'evento al div, ma clicchiamo sul paragrafo. Ovviamente, il clic sul paragrafo rappresenta contemporaneamente un clic sul div, poiché il paragrafo è contenuto nel nostro div.

Nel caso descritto, risulterà che la proprietà target conterrà il tag finale, in cui si è verificato l'evento - cioè il paragrafo, e non il div. Verifichiamolo:

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // mostrerà il nostro paragrafo
	console.log(this);         // mostrerà il nostro div
});

Supponiamo di avere una lista ul con tag li:

ul {
	padding: 30px;
	border: 1px solid red;
}
li {
	list-style-type: none;
	margin-bottom: 20px;
	border: 1px dashed black;
}

<ul id="elem">
	<li>testo</li>
	<li>testo</li>
	<li>testo</li>
	<li>testo</li>
	<li>testo</li>
</ul>

Collega al tag ul un gestore di click. In questo gestore, verifica tramite la proprietà tagName, su quale tag è stato cliccato. Se il clic è avvenuto sul tag li - aggiungi alla fine del testo di questo tag un punto esclamativo. E se il clic è avvenuto sul tag ul - visualizza informazioni a riguardo nella console.