JavaScript හි ඊතල සිදුවීම් සැකසුම්කරුවා තුළ this දෝෂය

මෑත කාලයේදී සාමාන්‍ය ශ්‍රිත වෙනුවට සෑම තැනකම ඊතල ශ්‍රිත යෙදීම නවචාරයක් බවට පත්ව ඇත. කෙසේ වෙතත්, මෙම ශ්‍රිත වල අවුල් තැනක් ඇත - ඒවා this සුරැකෙන්නේ නැත. මේ නිසා ඔබට මුහුණ දිය හැකි ගැටලුව කුමක්දැයි අපි බලමු.

අප සතුව බොත්තමක් ඇතැයි කියමු:

<button>text</button>

එම බොත්තම විචල්‍යයකට යොමු කර ගනිමු:

let button = document.querySelector('button');

ඊතල ශ්‍රිතයක් භාවිතා කරමින් බොත්තම මත සිදුවීම් සැකසුම්කරුවෙකු යොදමු:

button.addEventListener('click', () => {
	console.log(this.textContent);
});

මෙහිදී අපව පුදුමයකට ලක් කරන සුළු දෙයක් සිදුවේ: this ඊතල ශ්‍රිතය තුළ සිදුවීම සිදු වූ මූලද්‍රව්‍යයට යොමු නොවේ.

එයට අපට කළ හැකි දේ බලමු.

පළමු විසඳුම

ඔබට this භාවිතයෙන් වැළකී සිටිය හැකිය සහ සිදුවීම බැඳ ඇති විචල්‍යය භාවිතා කළ හැකිය:

button.addEventListener('click', () => {
	console.log(button.textContent);
});

දෙවන විසඳුම

සිදුවීම බැඳ ඇති මූලද්‍රව්‍යය event.target හරහා ලබා ගත හැකිය:

button.addEventListener('click', (event) => {
	console.log(event.target.textContent);
});

තෙවන විසඳුම

ඔබට ඊතල ශ්‍රිතයෙන් වැළකී සිටිය හැකිය සහ සාමාන්‍ය ශ්‍රිතයක් භාවිතා කළ හැකිය:

button.addEventListener('click', function() {
	console.log(this.textContent);
});