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

100 өлшеміндегі HTML кестесін жасаңыз 100-ға. Әрбір ұяшықты басқанда қызыл түске боялуы үшін жасаңыз.