Optimizacija rukovaoca događaja u JavaScript-u

Preveliki broj rukovaoca, dodatih na elemente, troši puno radne memorije i dovodi do zastoja stranice.

Pogledajmo na primeru. Recimo da imamo neku listu:

html<ul></ul>

Hvatanje reference na ovu listu u promenljivu:

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

Popunimo sada našu listu tagovima li, dodavši im rukovaoc za klik:

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

Kao rezultat, imamo 1000 rukovaoca. To je veoma mnogo. Za optimizaciju možemo dodati samo jedan rukovalac na tag ul, koristeći delegiranje.

Hajde da to uradimo. Za početak jednostavno kreiramo stavke liste:

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

A sada primenimo delegiranje rukovaoca događaja:

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