Elemento del evento en el objeto Event en JavaScript

El objeto Event también permite obtener el elemento en el que ocurrió el evento. Este elemento está contenido en la propiedad target. ¿Por qué es necesario, si este elemento está contenido en this?

El asunto es que en realidad this siempre contiene el elemento, al cual estaba vinculado el evento, mientras que la propiedad target - el elemento en el que realmente se hizo clic. Este elemento real puede coincidir con this, o puede no coincidir.

Veamos un ejemplo. Supongamos que tenemos un div, y dentro de él un párrafo:

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

Vinculemos el evento al div, pero hagamos clic en el párrafo. Obviamente, el clic en el párrafo representa simultáneamente un clic en el div, ya que el párrafo está contenido en nuestro div.

En el caso descrito, resultará que la propiedad target contendrá la etiqueta final, en la que ocurrió el evento - es decir, el párrafo, y no el div. Verifiquemos esto:

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

elem.addEventListener('click', function(event) {
  console.log(event.target); // mostrará nuestro párrafo
  console.log(this);         // mostrará nuestro 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>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>