Аптымізацыя апрацоўшчыкаў падзей у 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. Зрабіце так, каб кожная ячэйка па кліку фарбавалася ў чырвоны колер.