Елемент на събитието в обекта Event в JavaScript

Обектът Event също така позволява да се получи елементът, в който се е случило събитието. Този елемент се съдържа в свойството target. Защо е необходимо това, ако този елемент се съдържа в this?

Работата е там, че всъщност this винаги съдържа елемента, към който е било привързано събитието, а свойството target - елемента, по който реално е било щракването. Този реален елемент може да съвпада с this, а може и да не съвпада.

Нека разгледаме пример. Да предположим, че имаме div, а вътре в него параграф:

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

Нека прикачим събитие към div, но щракнем върху параграфа. Очевидно е, че щракването върху параграфа представлява едновременно и щракване върху div, тъй като параграфът се съдържа в нашия div.

В описания случай ще се окаже, че свойството target ще съдържа крайния таг, в който се е случило събитието - тоест параграфа, а не div. Нека се убедим в това:

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

elem.addEventListener('click', function(event) {
  console.log(event.target); // ще изведе нашия параграф
  console.log(this);         // ще изведе нашия 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>