Оптимизација руковаоца догађајима у JavaScript-у

Превелики број руковаоца, додатих на елементе, троши пуно оперативне меморије и доводи до застоја странице.

Хајде да погледамо на примеру. Рецимо да имамо неку листу:

html<ul></ul>

Узмимо референцу на ову листу у променљиву:

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

Испунимо сада нашу листу таг li, додајући им руковаоца клика:

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

На крају испада да имамо 1000 руковаоца. То је веома много. За оптимизацију можемо да додамо само један руковаоц на таг ul, користећи делегирање.

Хајде да то урадимо. За почетк просто направимо ставке листе:

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

А сада ћемо извршити делегирање руковаоца догађаја:

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