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:

html<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:

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

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

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

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