জাভাস্ক্রিপ্টে ইভেন্ট হ্যান্ডলার অপ্টিমাইজেশন

উপাদানের উপর লাগানো অত্যধিক সংখ্যক হ্যান্ডলার অপারেটিভ মেমরি的大量 খায় এবং পৃষ্ঠাকে হ্যাং করতে পারে।

আসুন একটি উদাহরণ দেখি। ধরুন আমাদের একটি তালিকা আছে:

<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 ট্যাগে শুধুমাত্র একটি হ্যান্ডলার যোগ করতে পারি, ডেলিগেশন ব্যবহার করে।

আসুন এটি করা যাক। প্রথমে শুধু তালিকার আইটেম তৈরি করি:

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

এবং এখন ইভেন্ট হ্যান্ডলারের ডেলিগেশন সম্পন্ন করি:

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

100 বাই 100 আকারের একটি HTML টেবিল তৈরি করুন। এটি এমনভাবে তৈরি করুন যাতে প্রতিটি সেল ক্লিক করলে লাল রং হয়।