JavaScript-də Hadisə Emalçılarının Optimallaşdırılması

Elementlərə əlavə edilmiş həddindən artıq çox sayda emalçı, çox sayda operativ yaddaş sərf edir və səhifənin ləngiməsinə səbəb olur.

Gəlin bir nümunəyə baxaq. Tutaq ki, bizim müəyyən bir siyahımız var:

<ul></ul>

Bu siyahıya istinadı dəyişəndə əldə edək:

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

İndi siyahımızı li teqləri ilə dolduraq, onlara klik hadisəsi emalçısı əlavə edərək:

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

Nəticədə bizdə 1000 emalçı olur. Bu, çox böyük rəqəmdir. Optimallaşdırmaq üçün biz yalnız bir emalçını ul teqinə əlavə edə bilərik, delegasiyadan istifadə edərək.

Gəlin bunu edək. Əvvəlcə sadəcə siyahı bəndlərini yaradaq:

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

İndi isə hadisə emalçısının delegasiyasını yerinə yetirək:

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

Ölçüsü 100 100 olan HTML cədvəli yaradın. Hər bir xananın klikdə qırmızı rəngə boyanmasını təmin edin.