Elementul evenimentului în obiectul Event în JavaScript

Obiectul Event permite, de asemenea, obținerea elementului în care a avut loc evenimentul. Acest element este conținut în proprietatea target. De ce este necesar acest lucru, dacă acest element este conținut în this?

Faptul este că, în realitate, this conține întotdeauna elementul, căruia i-a fost atașat evenimentul, iar proprietatea target - elementul pe care s-a făcut clic efectiv. Acest element real poate coincide cu this, dar poate și să nu coincidă.

Să ne uităm la un exemplu. Să presupunem că avem un div, iar în interiorul lui un paragraf:

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

Să atașăm evenimentul div-ului, dar să dăm clic pe paragraf. Evident, clicul pe paragraf reprezintă în același timp și un clic pe div, deoarece paragraful este conținut în div-ul nostru.

În cazul descris, se va întâmpla ca proprietatea target să conțină tag-ul final, în care a avut loc evenimentul - adică paragraful, și nu div-ul. Să ne convingem de acest lucru:

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

elem.addEventListener('click', function(event) {
  console.log(event.target); // va afișa paragraful nostru
  console.log(this);         // va afișa div-ul nostru
});

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>