JavaScript-də Event obyektində hadisə elementi

Event obyekti həmçinin hadisənin baş verdiyi elementi əldə etməyə imkan verir. Bu element target xüsusiyyətində saxlanılır. Bu niyə lazımdır, əgər bu element this-də saxlanılırsa?

Onda məsələ odur ki, əslində this həmişə hadisənin bağlandığı elementi ehtiva edir, target xüsusiyyəti isə - klikin əslində hansı element üzərində baş verdiyini göstərir. Bu əsl element this ilə üst-üstə düşə bilər, ya da düşməyə bilər.

Nümunəyə baxaq. Tutaq ki, bizim div var, onun için də abzas var:

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

Hadisəni div-ə bağlayaq, lakin abzasa klik edək. Aydındır ki, abzasa klik edilməsi eyni zamanda div-ə də klik edilməsi deməkdir, çünki abzas bizim div-imizin içindədir.

Təsvir edilən halda belə nəticə çıxır ki, target xüsusiyyəti hadisənin baş verdiyi sonuncu teqi ehtiva edəcək - yəni abzası, div-i yox. Buna əmin olaq:

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // bizim abzası göstərəcək
	console.log(this);         // bizim div-i göstərəcək
});

Tutaq ki, sizin ul siyahınız var və içində li teqləri var:

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>

ul teqinə klik işləyicisini bağlayın. Bu işləyicidə tagName xüsusiyyətindən istifadə edərək yoxlayın ki, hansı teq üzərində klik edilib. Əgər klik li teqi üzərində olubsa - bu teqin mətnin sonuna nida işarəsi əlavə edin. Əgər klik ul teqi üzərində olubsa - bu barədə məlumatı konsola çıxarın.