Element dogodka v objektu Event v JavaScript

Objekt Event prav tako omogoča pridobitev elementa, v katerem se je dogodek zgodil. Ta element je vsebovan v lastnosti target. Zakaj je to potrebno, če je ta element vsebovan v this?

Bistvo je v tem, da this vedno vsebuje element, na katerega je bil dogodek vezan, medtem ko lastnost target vsebuje element, na katerega je bil dejansko klik. Ta dejanski element lahko sovpada z this, lahko pa tudi ne.

Poglejmo si primer. Recimo, da imamo div, znotraj njega pa odstavek:

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

Povežimo dogodek z div, vendar kliknimo na odstavek. Očitno je, da klik na odstavek predstavlja hkrati tudi klik na div, saj je odstavek vsebovan v našem divu.

V opisanem primeru se bo izkazalo, da lastnost target vsebuje končno oznako, v kateri se je zgodil dogodek - to je odstavek, in ne div. Prepričajmo se v to:

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

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