Händelseelementet i Event-objektet i JavaScript

Objektet Event gör det också möjligt att få tag på elementet där händelsen inträffade. Detta element finns i egenskapen target. Varför är detta nödvändigt, när detta element finns i this?

Saken är den att this alltid innehåller elementet som händelsen var bunden till, medan egenskapen target innehåller elementet som faktiskt klickades på. Detta faktiska element kan sammanfalla med this, eller så kan det skilja sig åt.

Låt oss titta på ett exempel. Låt oss säga att vi har en div, och inuti den ett stycke:

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

Låt oss binda en händelse till div:en, men klicka på stycket. Uppenbarligen representerar ett klick på stycket samtidigt ett klick på div:en, eftersom stycket finns i vår div.

I det beskrivna fallet kommer egenskapen target att innehålla sluttaggen, där händelsen inträffade - det vill säga stycket, inte div:en. Låt oss övertyga oss om detta:

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // kommer att skriva ut vårt stycke
	console.log(this);         // kommer att skriva ut vår div
});

Låt oss säga att du har en lista ul med taggar li:

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

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

Binda en klickhanterare till taggen ul. I denna hanterare, kontrollera med hjälp av egenskapen tagName, vilken tagg som klickades på. Om klicket skedde på taggen li - lägg till ett utropstecken i slutet av texten i denna tagg. Och om klicket skedde på taggen ul - skriv information om detta till konsolen.