Оптимизација руковаоца догађајима у 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. Направите тако да свако поље по клику постане црвене боје.