Įvykių apdorojimo optimizavimas JavaScript

Per daug įvykių apdorojimo funkcijų, priskirtų elementams, suvartoja daug operatyviosios atminties ir sukelia puslapio užstrigimą.

Pažiūrėkime į pavyzdį. Tarkime, kad turime tam tikrą sąrašą:

<ul></ul>

Gaukime nuorodą į šį sąrašą kintamajame:

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

Užpildykime dabar mūsų sąrašą li žymėmis, priskirdami joms paspaudimo įvykio apdorojimo funkciją:

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

Galų gale pasirodo, kad mes turime 1000 įvykio apdorojimo funkcijų. Tai yra labai daug. Optimizavimui mes galime priskirti tik vieną įvykio apdorojimo funkciją ul žymei, pasinaudojus delegavimu.

Padarykime tai. Pirmiausia tiesiog sukurkime sąrašo punktus:

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

O dabar atlikime įvykių apdorojimo funkcijos delegavimą:

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

Sukurkite HTML lentelę, kurios dydis 100 ir 100. Padarykite taip, kad kiekvienas langelis paspaudus nusidažytų raudonai.