Hændelseselement i Event-objektet i JavaScript

Objektet Event giver også mulighed for at få elementet, hvor hændelsen fandt sted. Dette element er indeholdt i egenskaben target. Hvorfor er dette nødvendigt, når dette element er indeholdt i this?

Faktum er, at this altid indeholder elementet, som hændelsen var bundet til, mens egenskaben target - elementet, som der faktisk blev klikket på. Dette faktiske element kan falde sammen med this, eller det kan ikke falde sammen.

Lad os se på et eksempel. Antag, at vi har en div, og inde i den et afsnit:

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

Lad os binde en hændelse til div'en, men klikke på afsnittet. Det er indlysende, at et klik på afsnittet repræsenterer samtidig et klik på div'en, da afsnittet er indeholdt i vores div.

I det beskrevne tilfælde vil det vise sig, at egenskaben target vil indeholde det endelige tag, hvor hændelsen indtraf - det vil sige afsnittet, og ikke div'en. Lad os overbevise os selv om dette:

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

elem.addEventListener('click', function(event) {
  console.log(event.target); // vil udskrive vores afsnit
  console.log(this);         // vil udskrive vores 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>