Notikuma elements Event objektā JavaScript

Objekts Event arī ļauj iegūt elementu, kurā notikums notika. Šis elements atrodas īpašībā target. Kāpēc tas ir vajadzīgs, ja šis elements atrodas this?

Lieta ir tāda, ka patiesībā this vienmēr satur elementu, kuram bija piesaistīts notikums, bet īpašība target - elementu, uz kura faktiski tika klikšķināts. Šis reālais elements var sakrist ar this, bet var arī nesakrist.

Apskatīsim piemērā. Pieņemsim, ka mums ir div, un tajā atrodas rindkopa:

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

Piesaistīsim notikumu div, bet klikšķināsim uz rindkopas. Skaidrs, ka klikšķis uz rindkopas ir vienlaikus arī klikšķis uz div, jo rindkopa atrodas mūsu div.

Aprakstītajā gadījumā izrādīsies, ka īpašība target saturēs galīgo tagu, kurā notika notikums - tas ir, rindkopu, nevis div. Pārliecināsimies par to:

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // izvadīs mūsu rindkopu
	console.log(this);         // izvadīs mūsu div
});

Pieņemsim, ka jums ir saraksts ul ar tagiem li:

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

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

Piesaistiet tagam ul klikšķa apstrādātāju. Šajā apstrādātājā pārbaudiet, izmantojot īpašību tagName, uz kura taga tika klikšķināts. Ja klikšķis notika tagā li - pievienojiet šī taga teksta beigās izsaukuma zīmi. Bet ja klikšķis notika tagā ul - izvadiet informāciju par to konsolē.