Waka hadysynyň ýokarlanmagynda niýetlenen elementleri almak

Bizde iki element bolsun: div we şu div-iň içinde ýatan abzas p:

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

Div-iň çykgydyny üýtgeýjide alalyň:

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

Belliklerimize käbir stilleri goşalyň:

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

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

Indi diňe üstünde çykyş işleýjisi bar:

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

Div-iň padding bolany üçin, biz div-i basanymyzda, biz abza degip bileris, ýa-da şol abzaň ýok ýerine degip bileris, ýagny diňe div-e.

Şeýle hem çykyş işleýjisinde this hemişe işleýjiň baglanan elementine görkezer. Bizim ýagdaýymyzda bu bizim div:

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

Emma, biz asyl bolup, hadysanyň ýüze çykan belligini alyp bileris. Bunuň üçin biz event.target-da näme ýatanyna seredip bileris:

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

Bu iki warianty şertler bilen tapawutlandyryp bolýar:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('çykyş diňe div-de');
	}
	if (event.target.tagName === 'P') {
		console.log('çykyş diňe abzasda');
	}
});

tagName ornuna matches ulanyp bolýar:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('çykyş diňe div-de');
	}
	if (event.target.matches('p')) {
		console.log('çykyş diňe abzasda');
	}
});

Aşakdaky elementler berlen:

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

Div-iň üstüne çykyş işleýjisini baglaň. Şu işleýjide, hadysanyň haýsy bellikde ýüze çykandygyny kesgitleň.

Öňki meseläni üýtgediň. Şeýle ediň li basylanda, onuň soňuna ünlem belgisi goşulsyn, ul basylanda bolsa konsolda bu barada maglumat çap edilsin.