Hendelseselement i Event-objektet i JavaScript

Objektet Event lar oss også hente elementet der hendelsen inntraff. Dette elementet finnes i egenskapen target. Hvorfor trenger vi dette, når dette elementet finnes i this?

Saken er at this alltid inneholder elementet som hendelsen var bundet til, mens egenskapen target inneholder elementet som faktisk ble klikket på. Dette faktiske elementet kan samsvare med this, eller det kan avvike.

La oss se på et eksempel. Anta at vi har en div, og inni den et avsnitt:

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

La oss binde en hendelse til div-en, men klikke på avsnittet. Det er opplagt at et klikk på avsnittet samtidig er et klikk på div-en, siden avsnittet er inni vår div.

I det beskrevne tilfellet vil egenskapen target inneholde slutt-elementet der hendelsen inntraff - det vil si avsnittet, og ikke div-en. La oss overbevise oss om dette:

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // vil logge avsnittet vårt
	console.log(this);         // vil logge div-en vår
});

Anta at du har en liste ul med li-elementer:

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 klikk-håndterer til ul-elementet. I denne håndtereren, sjekk ved hjelp av egenskapen tagName, hvilket element det ble klikket på. Hvis klikket var på et li-element - legg til et utropstegn på slutten av teksten i det elementet. Og hvis klikket var på ul-elementet - logg informasjon om dette til konsollen.