Element udalosti v objekte Event v JavaScript

Objekt Event tiež umožňuje získať element, v ktorom udalosť nastala. Tento element je obsiahnutý vo vlastnosti target. Načo je to potrebné, keď je tento element obsiahnutý v this?

Vec sa má tak, že this vždy obsahuje element, ku ktorému bola událosť pripojená, zatiaľ čo vlastnosť target - element, na ktorý sa skutočne kliklo. Tento skutočný element sa môže zhodovať s this, alebo nemusí.

Pozrime sa na príklad. Predpokladajme, že máme div a v ňom odsek:

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

Pripojíme udalosť k divu, ale klikneme na odsek. Je zrejmé, že kliknutie na odsek predstavuje súčasne aj kliknutie na div, pretože odsek je obsiahnutý v našom dive.

V opísanom prípade to znamená, že vlastnosť target bude obsahovať konečný tag, v ktorom udalosť nastala - teda odsek, a nie div. Presvedčme sa o tom:

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

elem.addEventListener('click', function(event) {
  console.log(event.target); // vypíše náš odsek
  console.log(this);         // vypíše náš 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>