Sündmuste käitlejate optimeerimine JavaScriptis

Liiga palju käitlejaid, elementidele lisatud, söövad palju muutmälu ja viivad lehe kokkujooksmiseni.

Vaatame näite abil. Oletame, et meil on mingi loend:

<ul></ul>

Saame viite sellele loendile muutujasse:

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

Täidame nüüd meie loendi siltidega li, lisades neile kliki käitleja:

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

Lõpuks saame, et meil on 1000 käitlejat. See on väga palju. Optimeerimiseks võime lisada ainult ühe käitleja sildile ul, kasutades delegeerimist.

Teeme seda. Alustuseks lihtsalt loome loendi punktid:

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

Ja nüüd teostame sündmuste käitleja delegeerimise:

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

Looge HTML tabel mõõtmetega 100 korda 100. Tehke nii, et iga lahter klõpsamisel värvub punaseks.