Оптимизација на обработувачи на настани во JavaScript

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

Да погледнеме на пример. Да речеме дека имаме некоја листа:

<ul></ul>

Да ја добиеме референцата кон оваа листа во променлива:

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

Да ја пополниме сега нашата листа со тагови li, закачувајќи обработувач за клик на нив:

for (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, користејќи делегирање.

Да го направиме ова. Прво, едноставно да ги создадеме точките од листата:

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

А сега да извршиме делегирање на обработувачот за настани:

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

Создадете HTML табела со големина 100 на 100. Направете секоја ќелија да се обојува во црвена боја при клик.