Sündmuse element Event objekti JavaScriptis

Objekt Event võimaldab ka saada elementi, kus sündmus toimus. See element sisaldub omaduses target. Miks seda vaja on, kui see element sisaldub this-is?

Asi on selles, et tegelikult this sisaldab alati elementi, millele sündmus oli seotud, kuid omadus target - elementi, mida tegelikult klõpsati. See tegelik element võib kattuda this-ga, aga võib ka mitte kattuda.

Vaatame näidet. Olgu meil div ja selle sees lõik:

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

Seome sündmuse div-ile, kuid klõpsame lõigul. Ilmselgelt esindab lõigu klõpsamine samal ajal ka div-i klõpsamist, kuna lõik sisaldub meie div-is.

Kirjeldatud juhul selgub, et omadus target sisaldab lõplikku silti, milles sündmus toimus - see tähendab lõiku, mitte div-i. Veendume selles:

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

elem.addEventListener('click', function(event) {
  console.log(event.target); // väljastab meie lõigu
  console.log(this);         // väljastab meie div-i
});

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>