Mendapatkan Elemen Target saat Bubbling Event

Misalkan kita memiliki dua elemen: div dan paragraf p, yang terletak di dalam div ini:

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

Dapatkan referensi ke div kita dalam variabel:

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

Berikan beberapa gaya pada tag kita:

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

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

Sekarang misalkan handler klik ditambahkan ke div:

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

Karena div kita memiliki padding, maka ketika kita mengklik div, kita bisa mengklik paragraf, atau kita bisa mengklik di tempat yang tidak ada paragrafnya, yaitu langsung di div.

Dalam hal ini, this dalam handler klik akan selalu merujuk ke elemen tempat handler dipasang. Dalam kasus kita ini adalah div kita:

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

Namun, kita bisa mendapatkan tepatnya tag di mana event terjadi. Untuk ini kita dapat melihat apa yang ada di event.target:

div.addEventListener('click', function(event) {
	console.log(event.target); // bisa div atau paragraf
});

Kita dapat membedakan kedua opsi ini dengan menggunakan kondisi:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('klik tepatnya di div');
	}
	if (event.target.tagName === 'P') {
		console.log('klik tepatnya di paragraf');
	}
});

Alih-alih tagName, kita bisa menggunakan matches:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('klik tepatnya di div');
	}
	if (event.target.matches('p')) {
		console.log('klik tepatnya di paragraf');
	}
});

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

Pasang handler klik pada div. Dalam handler ini, tentukan di tag mana event terjadi.

Modifikasi tugas sebelumnya. Buatlah sehingga ketika mengklik li, tanda seru ditambahkan di akhirnya, dan ketika mengklik ul, informasi tentang hal ini ditampilkan di konsol.