Event elementiniň JavaScript-däki Event objekti

Event objekti şeýle hem event-iň ýüze çykan elementini alyp bermäge mümkinçilik berýär. Bu element target aýratynlygynda ýerleşýär. this-de bu element bar bolsa, näme üçin bu zerur?

Sebäbi, aslynda this hemişe event-iň baglanyşdyrylan elementini öz içine alýar, target aýratynlygy bolsa - hakykatan-da basylyp görülen elementi. Bu element this bilen deň bolup biler, ýa-da deň bolmasa hem biler.

Geliň mysal bilen göreliň. Bizde div bardyr, we onuň içinde abzas bardyr:

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

Event-i dive baglalyň, ýöne abzasa basyň. Bellidir, abzasa basmak bir wagtyň özünde dive basmakdyr, sebäbi abzas bizim divimiziň içinde ýerleşýär.

Görkezilen ýagdaýda, target aýratynlygy event-iň bolup geçen ýeketäk tegini, ýagny abzasy, dive degişli däldir öz içine alar. Muny anyklaýalyň:

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // bizim abzasymyzy çykarar
	console.log(this);         // bizim divimizi çykarar
});

Siziňde ul sanawyňyz bardyr li tegleri bilen:

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

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

ul tegine basylma işleýjisini baglaň. Bu işleýjide tagName aýratynlygyndan peýdalanyp, haýsy tege basylandygyny barlaň. Eger basylma li tegine edilenden bolsa - bu teginiň tekstiniň aýrynyna çykyş nyşany goşuň. Eger basylma ul tegine bolsa - bu baradaky maglumaty konsola çykaryň.