Оптимизација на обработувачи на настани во 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);
  }
});