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

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

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

html<ul></ul>

इस सूची का रेफरेंस एक वेरिएबल में प्राप्त करते हैं:

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

अब हमारी सूची को li टैग से भरते हैं, उन पर क्लिक हैंडलर लगाकर:

javascriptfor (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 टैग पर, डेलीगेशन का उपयोग करके।

आइए इसे करते हैं। सबसे पहले बस सूची के आइटम बनाते हैं:

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

और अब इवेंट हैंडलर का डेलीगेशन करते हैं:

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