JavaScript හි Event වස්තුවේ සිදුවීම් අංගය

Event වස්තුව ද සිදුවීම සිදු වූ අංගය ලබා ගැනීමට ඉඩ සලසයි. මෙම අංගය target ගුණයේ අඩංගු වේ. this හි මෙම අංගය අඩංගු නම් මෙය අවශ්‍ය ඇයි?

කාරණය නම්, සැබවින්ම this සෑම විටම සිදුවීම බැඳ ඇති අංගය අඩංගු කරයි, අතර target ගුණය - සැබවින්ම ක්ලික් කළ අංගය. මෙම සැබෑ අංගය this සමග ගැලපිය හැකිය, නැතහොත් නොගැලපිය හැකිය.

අපි උදාහරණයක් බලමු. අප සතුව div එකක් ඇතැයි සිතමු, එහි ඡේදයක් ඇත:

html<div id="elem">
  <p>text</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>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>