JavaScript में इवेंट हैंडलर का ऑप्टिमाइजेशन

तत्वों पर लगे बहुत अधिक हैंडलर, बहुत अधिक RAM मेमोरी खा जाते हैं और पेज के हैंग होने का कारण बनते हैं।

आइए एक उदाहरण देखें। मान लीजिए कि हमारे पास कुछ सूची है:

<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 टेबल बनाएं। ऐसा करें कि प्रत्येक सेल क्लिक करने पर लाल रंग में रंग जाए।