Hodisalar ko'tarilishida maqsadli elementni olish

Faraz qilaylik, bizda ikkita element bor: div va shu div ichida joylashgan p abzasi:

<div>
	<p></p>
</div>

Keling, divimizga havolani o'zgaruvchiga olaylik:

let div = document.querySelector('div');

Keling, teglarimizga ba'zi uslublarni qo'shamiz:

div {
	padding: 20px;
	border: 1px solid red;
}

p {
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Endi faraz qilaylik, divga bosish ishlovchisi qo'shilgan:

div.addEventListener('click', function() {
	console.log('click');
});

Divimizda padding bo'lgani sababli, divni bosganimizda, biz abzas ustiga bosa olamiz, yoki abzas bo'lmagan joyga, ya'ni to'g'ridan-to'g'ri div ustiga bosa olamiz.

Bunda bosish ishlovchisida this har doim ishlovchi bog'langan elementni ko'rsatadi. Bizning holatda bu divimiz:

div.addEventListener('click', function() {
	console.log(this); // div
});

Biroq, biz aynan hodisa yuz bergan tegni olishimiz mumkin. Buning uchun event.target da nima yotganini ko'rib chiqishimiz mumkin:

div.addEventListener('click', function(event) {
	console.log(event.target); // div yoki abzas
});

Bu ikkita variantni shartlar yordamida farqlash mumkin:

let div = document.querySelector('div');

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('bosish aynan div ustida');
	}
	if (event.target.tagName === 'P') {
		console.log('bosish aynan abzas ustida');
	}
});

tagName o'rniga matches dan foydalanish mumkin:

let div = document.querySelector('div');

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('bosish aynan div ustida');
	}
	if (event.target.matches('p')) {
		console.log('bosish aynan abzas ustida');
	}
});

Quyidagi elementlar berilgan:

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
</div>

div, ul, li {
	padding: 20px;
}

div {
	border: 1px solid red;
}
ul {
	border: 1px solid orange;
}
li {
	border: 1px solid green;
}

Divga bosish ishlovchisini qo'shing. Ushbu ishlovchida hodisa qaysi tegda ishlaganligini aniqlang.

Oldingi vazifani o'zgartiring. Shunday qilingki, li ustiga bosilganda, uning oxiriga undov belgisi qo'shilsin, ul ustiga bosilganda esa konsolga bu haqida ma'lumot chiqarilsin.