JavaScript'te Olay İşleyicilerin Optimizasyonu

Elementlere asılı aşırı sayıda işleyici, çok fazla RAM tüketir ve sayfanın takılmasına neden olur.

Bir örnek üzerinden inceleyelim. Diyelim ki bir listemiz var:

<ul></ul>

Bu listeye bir referansı değişkene alalım:

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

Şimdi listemizi li etiketleriyle dolduralım ve üzerlerine bir tıklama işleyicisi ekleyelim:

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

Sonuçta, 1000 tane işleyicimiz oluyor. Bu çok fazla. Optimizasyon için delegasyon'u kullanarak sadece bir tane işleyiciyi ul etiketine ekleyebiliriz.

Bunu yapalım. Önce sadece liste öğelerini oluşturalım:

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

Ve şimdi olay delegasyonunu gerçekleştirelim:

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

100'e 100 boyutunda bir HTML tablosu oluşturun. Her hücrenin tıklandığında kırmızı renge boyanmasını sağlayın.