Prvek události v objektu Event v JavaScriptu

Objekt Event také umožňuje získat prvek, ve kterém došlo k události. Tento prvek je obsažen ve vlastnosti target. K čemu to je, když je tento prvek obsažen v this?

Věc se má tak, že this vždy obsahuje prvek, ke kterému byla událost připnuta, zatímco vlastnost target - prvek, na který se skutečně kliklo. Tento skutečný prvek se může shodovat s this, ale také nemusí.

Podívejme se na příklad. Předpokládejme, že máme div a uvnitř něj odstavec:

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

Připojme událost k divu, ale klikněme na odstavec. Je zřejmé, že kliknutí na odstavec představuje současně i kliknutí na div, protože odstavec je obsažen v našem divu.

V popsaném případě se stane, že vlastnost target bude obsahovat koncový tag, ve kterém došlo k události - tedy odstavec, a ne div. Přesvědčme se o tom:

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

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