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:

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

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

elem.addEventListener('click', function(event) {
  console.log(event.target); // exibirá nosso parágrafo
  console.log(this);         // exibirá nossa 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>texto</li>
  <li>texto</li>
  <li>texto</li>
  <li>texto</li>
  <li>texto</li>
</ul>