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ň.