JavaScript-da Event obyektida hodisa elementi

Event obyekti hodisa sodir bo'lgan elementni olish imkonini beradi. Ushbu element target xususiyatida saqlanadi. Bu nima uchun kerak, agar bu element this ichida mavjud bo'lsa?

Gap shundaki, aslida this har doim hodisa bog'langan elementni o'z ichiga oladi, target xususiyati esa - haqiqatda klik qilingan elementni. Ushbu haqiqiy element this bilan mos kelishi mumkin yoki mos kelmasligi mumkin.

Keling, buni misol bilan ko'rib chiqaylik. Faraz qilaylik, bizda div bor va uning ichida abzat:

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

Keling, divga hodisani bog'laylik, lekin abzat ustiga bosing. Shubhasiz, abzat ustiga bosish shu bilan birga div ustiga bosishdir, chunki abzat bizning divimizning ichida joylashgan.

Tasvirlagan holatda natijada target xususiyati hodisa sodir bo'lgan oxirgi tegni, ya'ni abzatni o'z ichiga oladi, div emas. Bunga ishonch hosil qilaylik:

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // bizning abzatni chiqaradi
	console.log(this);         // bizning divni chiqaradi
});

Faraz qilaylik, sizda li teglari bilan ul ro'yxati mavjud:

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

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

ul tegiga klik hodisasi ishlovchisini bog'lang. Ushbu ishlovchida tagName xususiyatidan foydalanib, qaysi teg ustiga bosilganligini tekshiring. Agar li tegiga bosilgan bo'lsa - ushbu teg matnining oxiriga undov belgisini qo'shing. Agar ul tegiga bosilgan bo'lsa - bu haqda ma'lumotni konsolga chiqaring.