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:

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

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // vil udskrive vores afsnit
	console.log(this);         // vil udskrive vores div
});

Antag, at du har en liste ul med 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 en klikhåndterer til ul-tagget. I denne håndterer skal du kontrollere ved hjælp af egenskaben tagName, hvilket tag der blev klikket på. Hvis der blev klikket på tagget li - tilføj et udråbstegn i slutningen af teksten for dette tag. Og hvis der blev klikket på tagget ul - udskriv information om dette i konsollen.