Elemen Peristiwa dalam Objek Event di JavaScript

Objek Event juga membolehkan kita mendapatkan elemen di mana peristiwa berlaku. Elemen ini terkandung dalam sifat target. Mengapa ini diperlukan, jika elemen ini terkandung dalam this?

Hal ini kerana sebenarnya this selalu mengandungi elemen, yang mana peristiwa itu diikatkan, manakala sifat target - elemen yang sebenarnya diklik. Elemen sebenar ini mungkin sepadan dengan this, atau mungkin tidak sepadan.

Mari kita lihat contoh. Katakan kita mempunyai div, dan di dalamnya terdapat perenggan:

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

Mari ikat peristiwa kepada div, tetapi klik pada perenggan. Jelaslah, klik pada perenggan mewakili pada masa yang sama klik pada div, kerana perenggan terkandung dalam div kita.

Dalam kes yang diterangkan, sifat target akan mengandungi tag akhir, di mana peristiwa berlaku - iaitu perenggan, bukan div. Mari kita pastikan ini:

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

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

Katakan anda mempunyai senarai 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 pengendali klik kepada tag ul. Dalam pengendali ini, semak menggunakan sifat tagName, pada tag mana klik berlaku. Jika klik berlaku pada tag li - tambahkan tanda seru pada akhir teks tag tersebut. Dan jika klik berlaku pada tag ul - paparkan maklumat mengenainya dalam konsol.