JavaScript හි ලූපයක් තුළ event handlers එකතු කිරීම
දැන් අපි බහුලවම මූලද්රව්ය සඳහා event handlers එකතු කරන්නේ කෙසේදැයි ඉගෙන ගනිමු. උදාහරණයක් ලෙස, අප සතුව ඡේද තිබිය හැකිය:
<p>text1</p>
<p>text2</p>
<p>text3</p>
අප සතුව ශ්රිතයක් ද ඇතැයි සිතමු:
function func() {
console.log('!');
}
අපි අපේ ඡේද ලූපයකින් ගමන් කර එක් එක්
ඡේදය සඳහා ක්ලික් කිරීමේ event handler ලෙස
func ශ්රිතය එකතු කරමු:
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', func);
}
අපි තව දුරටත් ඉදිරියට ගොස්, ඕනෑම ඡේදයක් මත ක්ලික් කිරීමෙන් එම ඡේදයේ පෙළ අඩංගු වන පරිදි කරමු. කෙසේවෙතත්, ගැටලුවක් තිබේ: ඡේද බොහෝ ඇත, නමුත් event handler ශ්රිතය එකක් පමණි. එම event handler ශ්රිතය තුළ අපගේ ඡේද වෙන්කර හඳුනා ගන්නේ කෙසේද?
මේ සඳහා this වස්තුව අපට උපකාරී වනු ඇත -
සිදුවීමකදී ශ්රිතය ක්රියාත්මක වන විට මෙම වස්තුව
එම සිදුවීම සිදු වූ මූලද්රව්යයට යොමු වේ.
func අපගේ ශ්රිතයේ කේතය ඉහත කියූ ආකාරයට
යළි සකස් කරමු:
function func() {
console.log(this.textContent); // ඡේදයේ පෙළ ප්රතිදානය කරන්න
}
පහත ශ්රිතය ලබා දී ඇත:
function func() {
this.value = Number(this.value) + 1;
}
ආදාන ක්ෂේත්ර ද ලබා දී ඇත. අපගේ ඕනෑම ආදාන ක්ෂේත්රයක අවධානය අහිමි වන විට ඉහත දක්වා ඇති ශ්රිතය ක්රියාත්මක වන පරිදි සකසන්න.
සංඛ්යා සහිත ඡේද ලබා දී ඇත. ඕනෑම ඡේදයක් මත ක්ලික් කිරීමෙන් එහි ඇති සංඛ්යාව වර්ග කරන පරිදි සකසන්න.
