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:

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

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // mostrará nuestro párrafo
	console.log(this);         // mostrará nuestro div
});

Supongamos que tienes una lista ul con etiquetas 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>

Vincula a la etiqueta ul un manejador de clic. En este manejador, verifica mediante la propiedad tagName, en qué etiqueta se hizo clic. Si el clic fue en la etiqueta li - agrega al final del texto de esta etiqueta un signo de exclamación. Y si el clic fue en la etiqueta ul - muestra información sobre esto en la consola.