Otimização de manipuladores de eventos em JavaScript

Um número excessivo de manipuladores, associados aos elementos, consome muita memória RAM e leva a travamentos da página.

Vamos ver um exemplo. Suponha que temos uma determinada lista:

html<ul></ul>

Vamos obter a referência para esta lista em uma variável:

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

Agora, vamos preencher nossa lista com tags li, associando a elas um manipulador de clique:

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

No final, temos 1000 manipuladores. Isso é muito. Para otimizar, podemos associar apenas um manipulador à tag ul, utilizando delegação de eventos.

Vamos fazer isso. Primeiro, vamos apenas criar os itens da lista:

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

E agora vamos realizar a delegação do manipulador de eventos:

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