Tapahtumankäsittelijöiden optimointi JavaScriptissä

Liian monet käsittelijät, joita on kiinnitetty elementteihin, kuluttavat paljon muistia ja aiheuttavat sivun jumittumista.

Katsotaanpa esimerkkiä. Oletetaan, että meillä on jokin lista:

<ul></ul>

Haetaan viite tähän listaan muuttujaan:

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

Täytetään nyt listamme li-tageilla, ja kiinnitetään niihin klikkauskäsittelijä:

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

Lopputuloksena on, että meillä on 1000 käsittelijää. Tämä on erittäin paljon. Optimoidaksemme voimme kiinnittää vain yhden käsittelijän ul-tagiin hyödyntämällä delegointia.

Tehdään tämä. Aluksi luodaan vain listan kohdat:

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

Ja nyt toteutetaan tapahtumien delegointi:

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

Luo HTML-taulukko, koko 100 100. Tee niin, että jokainen solu värjäytyy punaiseksi klikattaessa.