Իվենթի տարրը Event օբյեկտում JavaScript-ում

Event օբյեկտը նաև հնարավորություն է տալիս ստանալ այն տարրը, որում տեղի է ունեցել իրադարձությունը: Այս տարրը պարունակվում է target հատկության մեջ: Ինչու՞ է դա անհրաժեշտ, եթե այդ տարրը պարունակվում է this-ում:

Բանն այն է, որ իրականում this-ը միշտ պարունակում է այն տարրը, որին կապված է եղել իրադարձությունը, իսկ target հատկությունը - այն տարրը, որի վրա իրականում կատարվել է կլիկը: Այս իրական տարրը կարող է համընկնել this-ի հետ, կամ էլ չհամընկնել:

Դիտարկենք օրինակով: Ենթադրենք մենք ունենք div, իսկ նրա ներսում՝ պարբերություն:

html<div id="elem">
  <p>տեքստ</p>
</div>

Կապենք իրադարձությունը div-ին, բայց կլիկ անենք պարբերության վրա: Ակնհայտ է, որ պարբերության վրա կլիկը միաժամանակ նաև կլիկ է div-ի վրա, քանի որ պարբերությունը գտնվում է մեր div-ի ներսում:

Նկարագրված դեպքում կստացվի, որ target հատկությունը կպարունակի այն վերջնական թեգը, որում տեղի է ունեցել իրադարձությունը - այսինքն՝ պարբերությունը, ոչ թե div-ը: Համոզվենք դրանում.

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

elem.addEventListener('click', function(event) {
  console.log(event.target); // կարտածի մեր պարբերությունը
  console.log(this);         // կարտածի մեր div-ը
});

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

html<ul id="elem">
  <li>տեքստ</li>
  <li>տեքստ</li>
  <li>տեքստ</li>
  <li>տեքստ</li>
  <li>տեքստ</li>
</ul>