JavaScript හි ලූපයක් තුළ event handlers එකතු කිරීම

දැන් අපි බහුලවම මූලද්‍රව්‍ය සඳහා event handlers එකතු කරන්නේ කෙසේදැයි ඉගෙන ගනිමු. උදාහරණයක් ලෙස, අප සතුව ඡේද තිබිය හැකිය:

html<p>text1</p>
<p>text2</p>
<p>text3</p>

අප සතුව ශ්‍රිතයක් ද ඇතැයි සිතමු:

javascriptfunction func() {
  console.log('!');
}

අපි අපේ ඡේද ලූපයකින් ගමන් කර එක් එක් ඡේදය සඳහා ක්ලික් කිරීමේ event handler ලෙස func ශ්‍රිතය එකතු කරමු:

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  elem.addEventListener('click', func);
}

අපි තව දුරටත් ඉදිරියට ගොස්, ඕනෑම ඡේදයක් මත ක්ලික් කිරීමෙන් එම ඡේදයේ පෙළ අඩංගු වන පරිදි කරමු. කෙසේවෙතත්, ගැටලුවක් තිබේ: ඡේද බොහෝ ඇත, නමුත් event handler ශ්‍රිතය එකක් පමණි. එම event handler ශ්‍රිතය තුළ අපගේ ඡේද වෙන්කර හඳුනා ගන්නේ කෙසේද?

මේ සඳහා this වස්තුව අපට උපකාරී වනු ඇත - සිදුවීමකදී ශ්‍රිතය ක්‍රියාත්මක වන විට මෙම වස්තුව එම සිදුවීම සිදු වූ මූලද්‍රව්‍යයට යොමු වේ. func අපගේ ශ්‍රිතයේ කේතය ඉහත කියූ ආකාරයට යළි සකස් කරමු:

javascriptfunction func() {
  console.log(this.textContent); // ඡේදයේ පෙළ ප්‍රතිදානය කරන්න
}

javascriptfunction func() {
  this.value = Number(this.value) + 1;
}