Notikumu apstrādātāju optimizācija JavaScript

Pārāk daudz notikumu apstrādātāju, kas pievienoti elementiem, aizņem daudz operatīvās atmiņas un noved pie lapas aizķeršanās.

Apskatīsim to ar piemēru. Pieņemsim, ka mums ir kāds saraksts:

<ul></ul>

Iegūsim atsauci uz šo sarakstu mainīgajā:

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

Aizpildīsim tagad mūsu sarakstu ar tagiem li, pievienojot tiem klikšķa notikuma apstrādātāju:

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

Rezultātā mums ir 1000 notikumu apstrādātāji. Tas ir ļoti daudz. Optimizēšanai mēs varam pievienot tikai vienu notikumu apstrādātāju tagam ul, izmantojot deleģēšanu.

Izdarīsim to. Vispirms vienkārši izveidosim saraksta punktus:

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

Un tagad izveidosim notikumu deleģēšanu:

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

Izveidojiet HTML tabulu ar izmēru 100 uz 100. Iestatiet to tā, lai katra šūna pēc noklikšķināšanas iekrāsotos sarkanā krāsā.