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:

html<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ň:

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

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

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

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