Mendapatkan Elemen Sasaran apabila Peristiwa Menggelegak

Katakan kita mempunyai dua elemen: div dan perenggan p, terletak di dalam div ini:

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

Mari dapatkan pautan ke div kita dalam pembolehubah:

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

Mari tambahkan beberapa gaya kepada tag kami:

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

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

Sekarang, katakan penangan klik dilampirkan pada div:

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

Oleh kerana div kami mempunyai padding, apabila kita mengklik pada div, kita mungkin mengklik pada perenggan, atau kita mungkin mengklik pada tempat yang tiada perenggan, iaitu terus pada div.

Dalam penangan klik, this akan sentiasa merujuk kepada elemen di mana penangan dilampirkan. Dalam kes kami, ia adalah div kami:

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

Walau bagaimanapun, kita boleh mendapatkan tag yang tepat di mana peristiwa itu berlaku. Untuk melakukan ini, kita boleh melihat apa yang ada dalam event.target:

div.addEventListener('click', function(event) {
	console.log(event.target); // sama ada div atau perenggan
});

Kedua-dua pilihan ini boleh dibezakan menggunakan penyataan bersyarat:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('klik tepat pada div');
	}
	if (event.target.tagName === 'P') {
		console.log('klik tepat pada perenggan');
	}
});

Selain tagName, anda boleh menggunakan matches:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('klik tepat pada div');
	}
	if (event.target.matches('p')) {
		console.log('klik tepat pada perenggan');
	}
});

Diberi elemen-elemen berikut:

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

Lampirkan penangan klik pada div. Dalam penangan ini, tentukan dalam tag mana peristiwa itu dicetuskan.

Ubah suai tugas sebelumnya. Buat supaya apabila mengklik pada li, tanda seru ditambahkan pada penghujungnya, dan apabila mengklik pada ul, maklumat mengenai ini dipaparkan dalam konsol.