Element zdarzenia w obiekcie Event w JavaScript

Obiekt Event również pozwala uzyskać element, w którym wystąpiło zdarzenie. Ten element jest zawarty we właściwości target. Po co to jest potrzebne, skoro ten element jest zawarty w this?

Chodzi o to, że w rzeczywistości this zawsze zawiera element, do którego było przypisane zdarzenie, a właściwość target - element, w który rzeczywiście nastąpiło kliknięcie. Ten rzeczywisty element może pokrywać się z this, a może nie pokrywać się.

Spójrzmy na przykład. Załóżmy, że mamy div, a wewnątrz niego akapit:

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

Przypiszmy zdarzenie do diva, ale kliknijmy w akapit. Oczywiste jest, że kliknięcie w akapit stanowi jednocześnie kliknięcie w diva, ponieważ akapit jest zawarty w naszym divie.

W opisanym przypadku okaże się, że właściwość target będzie zawierać końcowy tag, w którym wystąpiło zdarzenie - czyli akapit, a nie div. Przekonajmy się o tym:

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

elem.addEventListener('click', function(event) {
  console.log(event.target); // wypisze nasz akapit
  console.log(this);         // wypisze nasz 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>tekst</li>
  <li>tekst</li>
  <li>tekst</li>
  <li>tekst</li>
  <li>tekst</li>
</ul>