Gebeurteniselement in het Event object in JavaScript

Het object Event maakt het ook mogelijk om het element te verkrijgen waar de gebeurtenis plaatsvond. Dit element bevindt zich in de eigenschap target. Waarom is dit nodig, als dit element zich in this bevindt?

Het feit is dat this altijd het element bevat waaraan de gebeurtenis was gebonden, terwijl de eigenschap target - het element bevat waar daadwerkelijk op werd geklikt. Dit werkelijke element kan samenvallen met this, of kan niet samenvallen.

Laten we naar een voorbeeld kijken. Stel we hebben een div, en daarin een paragraaf:

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

Laten we een gebeurtenis aan de div binden, maar klikken op de paragraaf. Het is duidelijk dat een klik op de paragraaf tegelijkertijd een klik op de div is, omdat de paragraaf zich in onze div bevindt.

In het beschreven geval zal de eigenschap target het uiteindelijke tag bevatten, waar de gebeurtenis plaatsvond - dat wil zeggen de paragraaf, en niet de div. Laten we dit verifiëren:

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

elem.addEventListener('click', function(event) {
  console.log(event.target); // zal onze paragraaf weergeven
  console.log(this);         // zal onze div weergeven
});

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>