Upatajwa wa Kipengele Lengwa wakati wa Fuatilia Matukio

Tuchukulie tuna vipengele viwili: div na aya p, iliyomo ndani ya div hiyo:

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

Tupate kiungo kwa div yetu kwenye kutofautisha:

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

Tuongeze mitindo kwa vitambulisho vyetu:

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

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

Tuchukulie sasa kichakataji cha kubonyeza kimewekwa kwenye div:

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

Kwa sababu div yetu ina padding, basi, tunapobonyeza div, tunaweza kubonyeza aya, au tunaweza kubonyeza sehemu ambayo hayuko aya hiyo, yaani moja kwa moja kwenye div.

Wakati huo huo kichakataji cha kubonyeza this daima itaelekeza kwenye kipengele ambacho kimewekwa kichakataji. Katika kesi yetu hii ni div yetu:

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

Hata hivyo, tunaweza kupata hasa kitambulisho, ambacho tukio limetokea. Kwa hili tunaweza kuangalia kile kilichomo kwenye event.target:

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

Inawezekana kutofautisha chaguzi hizi mbili kwa kutumia masharti:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('kubonyeza hasa kwenye div');
	}
	if (event.target.tagName === 'P') {
		console.log('kubonyeza hasa kwenye aya');
	}
});

Badala ya tagName inaweza kutumika matches:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('kubonyeza hasa kwenye div');
	}
	if (event.target.matches('p')) {
		console.log('kubonyeza hasa kwenye aya');
	}
});

Kuna vipengele vifuatavyo:

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

Weka kichakataji cha kubonyeza kwenye div. Katika kichakataji hiki amua, kwenye kitambulisho gani kilichotokea tukio.

Badilisha shida iliyopita. Fanya ili wakati wa kubonyeza li, iweze mwisho kuongezwa alama ya mshangao, na wakati wa kubonyeza kwenye ul kwenye konsole itoe habari kuhusu hilo.