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:

<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:

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

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

Stel je hebt een lijst ul met tags li:

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

<ul id="elem">
	<li>tekst</li>
	<li>tekst</li>
	<li>tekst</li>
	<li>tekst</li>
	<li>tekst</li>
</ul>

Bind aan de tag ul een klik-handler. Controleer in deze handler met behulp van de eigenschap tagName, op welke tag werd geklikt. Als er werd geklikt op de tag li - voeg dan aan het einde van de tekst van deze tag een uitroepteken toe. En als er werd geklikt op de tag ul - geef hier dan informatie over weer in de console.