Элемент события в объекте Event в JavaScript

Объект Event также позволяет получить элемент, в котором произошло событие. Этот элемент содержится в свойстве target. Зачем это нужно, если этот элемент содержится в this?

Дело в том, что на самом деле this всегда содержит элемент, к которому было привязано событие, а свойство target - элемент, по которому реально был клик. Этот реальный элемент может совпадать с this, а может не совпадать.

Давайте посмотрим на примере. Пусть у нас есть div, а внутри него абзац:

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

Привяжем событие к диву, но кликнем по абзацу. Очевидно, что клик по абзацу представляет собой одновременно и клик по диву, так как абзац содержится в нашем диве.

В описанном случае получится, что свойство target будет содержать конечный тег, в котором случилось событие - то есть абзац, а не див. Убедимся в этом:

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

elem.addEventListener('click', function(event) {
  console.log(event.target); // выведет наш абзац
  console.log(this);         // выведет наш див
});

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>