Окуялар көтөрүлгөндө максаттуу элементти алуу

Бизде эки элемент болсун: 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 боюнча чыкылдатканда консольго бул жөнүндө маалымат чыгарылсын.