ඉබෙනු සිද්ධීන් තුළ ඉලක්කගත අංගය ලබා ගැනීම

අපට අංග දෙකක් ඇතැයි සිතමු: div සහ එම div එක තුළ පිහිටා ඇති p ඡේදය:

html<div>
  <p></p>
</div>

අපගේ div එක විචල්‍යයකට සම්බන්ධ කර ගනිමු:

javascriptlet div = document.querySelector('div');

අපගේ ටැග් වලට ඇතැම් විලාසිතා එක් කරමු:

cssdiv {
  padding: 20px;
  border: 1px solid red;
}

p {
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

දැන් div එකට ක්ලික් සංස්කාරකයක් එක් කර ඇතැයි සිතමු:

javascriptdiv.addEventListener('click', function() {
  console.log('click');
});

අපගේ div එකට padding ඇති හෙයින්, අපි div එක මත ක්ලික් කරන විට, එය ඡේදය මත වැදීමට හෝ එම ඡේදය නොමැති ස්ථානයක, එනම් div එක මත පෙළඹීමට හැකිය.

මෙහිදී ක්ලික් සංස්කාරකය තුළ this සැමවිටම සංස්කාරකය යොදන ලද අංගයට මූලිකත්වය දෙයි. අපගේ අවස්ථාවේ දී එය අපගේ div එක වේ:

javascriptdiv.addEventListener('click', function() {
  console.log(this); // div
});

කෙසේ වෙතත්, සිදුවීම සිදු වූ නිශ්චිත ටැග් එක අපට ලබා ගත හැකිය. මේ සඳහා අපි event.target හි පවතින දෙය බලා ගත හැකිය:

javascriptdiv.addEventListener('click', function(event) {
  console.log(event.target); // div හෝ p
});

මෙම විකල්ප දෙක කොන්දේසි භාවිතයෙන් වෙන්කර හඳුනා ගත හැකිය:

javascriptlet div = document.querySelector('div');

div.addEventListener('click', function(event) {
  if (event.target.tagName === 'DIV') {
    console.log('ක්ලික් කරන ලද්දේ div එකටයි');
  }
  if (event.target.tagName === 'P') {
    console.log('ක්ලික් කරන ලද්දේ ඡේදයටයි');
  }
});

tagName වෙනුවට matches ක්‍රමය භාවිතා කළ හැකිය:

javascriptlet div = document.querySelector('div');

div.addEventListener('click', function(event) {
  if (event.target.matches('div')) {
    console.log('ක්ලික් කරන ලද්දේ div එකටයි');
  }
  if (event.target.matches('p')) {
    console.log('ක්ලික් කරන ලද්දේ ඡේදයටයි');
  }
});

html<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

cssdiv, ul, li {
  padding: 20px;
}

div {
  border: 1px solid red;
}
ul {
  border: 1px solid orange;
}
li {
  border: 1px solid green;
}