Optimizarea handler-elor de evenimente în JavaScript

Un număr excesiv de mare de handler-e, atașate elementelor, consumă multă memorie operativă și duc la înghețarea paginii.

Să ne uităm la un exemplu. Să presupunem că avem o listă:

html<ul></ul>

Să obținem o referință la această listă într-o variabilă:

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

Să populăm acum lista noastră cu tag-uri li, atașându-le un handler pentru click:

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);
  });
}

În final, rezultă că avem 1000 de handler-e. Este foarte mult. Pentru optimizare putem atașa un singur handler pe tag-ul ul, folosind delegarea.

Să facem acest lucru. Pentru început, pur și simplu să creem elementele listei:

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

Și acum să efectuăm delegarea handler-ului de evenimente:

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