Восита ходисаларида максадли элементни олиш

Фарз қилайлик, бизда иккита элемент бор: div ва шу див ичида жойлашган p абзаци:

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

Дивга ҳаволани ўзгарувчига оламиз:

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

Тегларимизга айрим стилларни қўшамиз:

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

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

Энди дивга клик ҳодисасини қайта ishlovчини (обработчик) қўшайлик:

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

Бизнинг див paddingга эга бўлгани сабабли, дивга босганда, биз абзац устига босимиз ёки абзац бўлмаган жойга, яъни тўғри див устига босимиз.

Шу билан бирга, клик ҳодисасини қайта ishlовчида this ҳамиша ҳодиса қўйилган элементни кўрсатади. Бизнинг ҳолатда бу бизнинг дивимиз:

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

Аммо, биз айнан қайси тегда ҳодиса юз берганини билишимиз мумкин. Бунинг учун биз event.target да қайси маълумот турганини кўришимиз мумкин:

div.addEventListener('click', function(event) {
	console.log(event.target); // див ёки абзац
});

Бу икки вариантни шартлар ёрдамида фарқлаш мумкин:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('айнан дивга босилди');
	}
	if (event.target.tagName === 'P') {
		console.log('айнан абзацга босилди');
	}
});

tagName ўрнига matches дан фойдаланиш мумкин:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('айнан дивга босилди');
	}
	if (event.target.matches('p')) {
		console.log('айнан абзацга босилди');
	}
});

Қуйидаги элементлар берилган:

<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;
}

Дивга клик ҳодисасини қайта ishlовчини қўшинг. Ушбу қайта ishlовчида қайси тегда ҳодиса юз берганини аниқланг.

Олдинги масалани модификация қилинг. Қилингки li га босилганда, унинг охирига унглатиш белгиси қўшилсин, ul га босилганда эса консолга бу ҳақида маълумот чиқарилсин.