Az esemény eleme az Event objektumban JavaScriptben

Az Event objektum lehetővé teszi annak az elemnek a megszerzését is, amiben az esemény bekövetkezett. Ez az elem a target tulajdonságban található. Miért van erre szükség, ha ez az elem a this-ben is megtalálható?

Az igazság az, hogy a this mindig azt az elemet tartalmazza, amelyhez az esemény hozzá volt kötve, míg a target tulajdonság - azt az elemet, amelyre ténylegesen kattintottak. Ez a tényleges elem egybeeshet a this-vel, de nem is feltétlenül.

Nézzünk egy példát. Tegyük fel, hogy van egy div-ünk, és benne egy bekezdés:

html<div id="elem">
  <p>szöveg</p>
</div>

Kössünk eseményt a div-hez, de kattintsunk a bekezdésre. Nyilvánvaló, hogy a bekezdésre kattintás egyben a div-re kattintást is jelent, mivel a bekezdés a div-ünkben található.

A leírt esetben kiderül, hogy a target tulajdonság a végső tag-et fogja tartalmazni, amiben az esemény bekövetkezett - vagyis a bekezdést, és nem a div-et. Győződjünk meg erről:

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

elem.addEventListener('click', function(event) {
  console.log(event.target); // kiírja a bekezdésünket
  console.log(this);         // kiírja a div-ünket
});

cssul {
  padding: 30px;
  border: 1px solid red;
}
li {
  list-style-type: none;
  margin-bottom: 20px;
  border: 1px dashed black;
}

html<ul id="elem">
  <li>szöveg</li>
  <li>szöveg</li>
  <li>szöveg</li>
  <li>szöveg</li>
  <li>szöveg</li>
</ul>