Elemento de evento no objeto Event em JavaScript

O objeto Event também permite obter o elemento no qual o evento ocorreu. Este elemento está contido na propriedade target. Por que isso é necessário, se este elemento está contido em this?

O fato é que, na realidade, this sempre contém o elemento ao qual o evento foi vinculado, enquanto a propriedade target contém o elemento no qual o clique realmente ocorreu. Este elemento real pode coincidir com this, ou pode não coincidir.

Vamos ver um exemplo. Suponha que temos um div e, dentro dele, um parágrafo:

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

Vamos vincular um evento à div, mas clicar no parágrafo. Obviamente, o clique no parágrafo representa simultaneamente um clique na div, já que o parágrafo está contido em nossa div.

No caso descrito, a propriedade target conterá a tag final, na qual o evento ocorreu - ou seja, o parágrafo, e não a div. Vamos confirmar isso:

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // exibirá nosso parágrafo
	console.log(this);         // exibirá nossa div
});

Suponha que você tenha uma lista ul com tags li:

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

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

Vincule ao tag ul um manipulador de clique. Neste manipulador, verifique usando a propriedade tagName, em qual tag o clique ocorreu. Se o clique foi em uma tag li - adicione um ponto de exclamação ao final do texto desse elemento. E se o clique foi na tag ul - exiba informações sobre isso no console.