JavaScript හි සිද්ධි හසුරුවන්නන් ප්‍රශස්ත කිරීම

මූලද්‍රව්‍ය මත එල්ල කර ඇති අති විශාල සංඛ්‍යාවක සිද්ධි හසුරුවන්නන් රැම් මතකය බහුලව භාවිතා කරන අතර පිටුවේ ක්‍රියාකාරීත්වය මන්දගාමී කරයි.

අපි උදාහරණයක් බලමු. අපට යම් ලැයිස්තුවක් ඇතැයි සිතමු:

<ul></ul>

මෙම ලැයිස්තුව සඳහා විචල්‍යයකට සබැඳියක් ලබා ගනිමු:

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

අපගේ ලැයිස්තුව ඊට පසුව li ටැග් මගින් පුරවමු, ඒවායේ ක්ලික් සිද්ධිය සඳහා හසුරුවන්නෙක් එක් කරමින්:

for (let i = 1; i <= 1000; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	ul.append(li);
	
	li.addEventListener('click', function() {
		console.log(this.textContent);
	});
}

එහි ප්‍රතිඵලයක් ලෙස, අපට 1000 හසුරුවන්නන් ලැබේ. මෙය ඉතා අධික අගයකි. ප්‍රශස්ත කිරීම සඳහා අපට හසුරුවන්නෙක් එක් කළ හැක්කේ ul ටැගයට පමණි, delegation භාවිතා කරමින්.

අපි එය කරමු. පළමුව, සරලවම ලැයිස්තු අයිතම නිර්මාණය කරමු:

for (let i = 1; i <= 1000; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	ul.append(li);
}

දැන් අපි සිද්ධි හසුරුවන්නෙකුගේ delegation සිදු කරමු:

ul.addEventListener('click', function(event) {
	let li = event.target.closest('li');
	
	if (li) {
		console.log(li.textContent);
	}
});

HTML වගුවක් 100 ක 100 විශාලත්වයෙන් සාදන්න. සෑම සෛලයක්ම ක්ලික් කිරීමෙන් රතු පැහැයට වර්ණ වන පරිදි සකසන්න.