Optimización de manejadores de eventos en JavaScript

Una cantidad excesiva de manejadores, asignados a los elementos, consume mucha memoria RAM y provoca que la página se relentice.

Veamos un ejemplo. Supongamos que tenemos una lista:

html<ul></ul>

Obtengamos una referencia a esta lista en una variable:

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

Llenemos ahora nuestra lista con etiquetas li, asignándoles un manejador de clic:

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

Como resultado, tenemos 1000 manejadores. Esto es demasiado. Para optimizar podemos asignar solo un manejador a la etiqueta ul, utilizando delegación de eventos.

Hagámoslo. Primero, simplemente creemos los elementos de la lista:

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

Y ahora implementemos la delegación del manejador de eventos:

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