Optymalizacja obsługi zdarzeń w JavaScript

Nadmierna liczba procedur obsługi zdarzeń, przypisanych do elementów, zużywa dużo pamięci operacyjnej i prowadzi do zawieszania się strony.

Spójrzmy na przykład. Załóżmy, że mamy pewną listę:

html<ul></ul>

Pobierzmy referencję do tej listy do zmiennej:

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

Wypełnijmy teraz naszą listę znacznikami li, przypisując do nich procedurę obsługi kliknięcia:

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

W efekcie otrzymujemy, że mamy 1000 procedur obsługi. To bardzo dużo. Dla optymalizacji możemy przypisać tylko jedną procedurę obsługi do znacznika ul, wykorzystując delegowanie zdarzeń.

Zróbmy to. Na początek po prostu stwórzmy elementy listy:

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

A teraz wykonajmy delegowanie obsługi zdarzeń:

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