Kipengele cha Tukio katika Kitu cha Tukio katika JavaScript

Kitu Event pia huruhusu kupata kipengele ambacho tukio lilitokea. Hiki kipengele kiko katika sifa target. Kwa nini hii inahitajika, ikiwa kipengele hiki kiko katika this?

Jambo ni kwamba this daima ina kipengele ambacho tukio limefungwa, lakini sifa target - kipengele ambacho kimebonyezwa kweli. Kipengele hiki cha kweli kinaweza kuwa sawa na this, au kinaweza kutofautiana.

Tuangalie kwa mfano. Hebu tuseme tuna div, na ndani yake kuna aya:

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

Tulifunge tukio kwenye div, lakini tubonyeze aya. Ni wazi, kubonyeza aya ni wakati mmoja na kubonyeza div, kwa sababu aya iko ndani ya div yetu.

Katika kesi iliyoelezewa, sifa target itakuwa na lebo ya mwisho, ambayo tukio lilitokea - yaani aya, sio div. Hebu tukubaliane na hili:

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // itatoa aya yetu
	console.log(this);         // itatoa div yetu
});

Hebu uwe na orodha ul na lebo li:

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

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

Funga kichakataji cha kubonyeza kwenye lebo ul. Katika kichakataji hiki, angalia kwa kutumia sifa tagName, lebo gani ilibonyezwa. Ikiwa bonyeo lilikuwa kwenye lebo li - ongeza mwishoni mwa maandishi ya lebo hii alama ya mshangao. Na ikiwa bonyeo lilikuwa kwenye lebo ul - toa taarifa kuhusu hilo kwenye konsoli.