Ҳадафи элементҳоро дар рафти рӯйдодҳо ба даст овардан

Бигзор ду элемент дошта бошем: 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;
}

Бигзор акнун ба див коргузори клик насб шудааст:

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

Аз он сабаб, ки диви мо padding дорад, вақте ки мо рӯи див клик мекунем, метавонем рӯи абзас бизанем, ё метавонем ба ҷое бизанем, ки ин абзас вуҷуд надорад, яъне бевосита рӯи худи див.

Дар ин ҳол дар коргузори клик 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;
}

Ба див коргузори клик насб кунед. Дар ин коргузор муайян кунед, ки дар кадом аз тегҳо рӯйдод фаъол шудааст.

Масъалаи гузаштаро тағир диҳед. Чунон кунед, ки ҳангоми клик кардан рӯи li, ба охири он аломати ситора илова шавад, ва ҳангоми клик кардан рӯи ul дар консол иттилоот дар бораи ин чоп шавад.