Element događaja u Event objektu u JavaScript-u

Objektat Event takođe omogućava da dobijemo element u kojem se događaj desio. Ovaj element se nalazi u svojstvu target. Zašto je ovo potrebno, ako se ovaj element nalazi u this?

Stvar je u tome što this uvek sadrži element, na koji je događaj bio vezan, dok svojstvo target - element na koji je stvarno kliknuto. Ovaj stvarni element može se poklopiti sa this, a može i ne.

Pogledajmo na primeru. Neka imamo div, a unutar njega paragraf:

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

Povežimo događaj na div, ali kliknimo na paragraf. Očigledno je da klik na paragraf predstavlja istovremeno i klik na div, jer se paragraf nalazi u našem divu.

U opisanom slučaju će se pokazati da svojstvo target sadrži krajnji tag, u kojem se desio događaj - odnosno paragraf, a ne div. Uverimo se u ovo:

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

elem.addEventListener('click', function(event) {
  console.log(event.target); // ispisaće naš paragraf
  console.log(this);         // ispisaće naš 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>