Елемент догађаја у објекту 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>