Elemen Peristiwa dalam Objek Event di JavaScript

Objek Event juga memungkinkan untuk mendapatkan elemen tempat peristiwa terjadi. Elemen ini terkandung dalam properti target. Mengapa ini diperlukan, jika elemen ini sudah terkandung dalam this?

Masalahnya adalah, this selalu berisi elemen, yang mana peristiwa terikat padanya, sedangkan properti target - adalah elemen yang benar-benar diklik. Elemen sebenarnya ini bisa sama dengan this, atau bisa juga tidak sama.

Mari kita lihat contohnya. Misalkan kita memiliki div, dan di dalamnya ada paragraf:

<div id="elem">
	<p>teks</p>
</div>

Mari kita ikat peristiwa ke div, tetapi klik pada paragraf. Jelas bahwa klik pada paragraf merupakan klik pada div juga, karena paragraf berada di dalam div kita.

Dalam kasus yang dijelaskan, properti target akan berisi tag akhir, di mana peristiwa terjadi - yaitu paragraf, bukan div. Mari kita buktikan:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function(event) {
	console.log(event.target); // akan menampilkan paragraf kita
	console.log(this);         // akan menampilkan div kita
});

Misalkan Anda memiliki daftar ul dengan tag li:

ul {
	padding: 30px;
	border: 1px solid red;
}
li {
	list-style-type: none;
	margin-bottom: 20px;
	border: 1px dashed black;
}

<ul id="elem">
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
</ul>

Ikat penangan klik ke tag ul. Dalam penangan ini, periksa menggunakan properti tagName, pada tag mana klik terjadi. Jika klik terjadi pada tag li - tambahkan tanda seru ke akhir teks dari tag tersebut. Dan jika klik terjadi pada tag ul - tampilkan informasi tentang hal ini di konsol.