JavaScriptda Hodisa Qoplovchilarni Optimallashtirish

Elementlarga bog'langan haddan tashqari ko'p hodisa qoplovchilari ko'p operativ xotirani egallaydi va sahifaning sekinlashishiga olib keladi.

Keling, bir misolni ko'rib chiqaylik. Faraz qilaylik, bizda ma'lum bir ro'yxat mavjud:

<ul></ul>

Keling, ushbu ro'yxatga havolani o'zgaruvchiga olaylik:

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

Keling, endi bizning ro'yxatimizni li teglari bilan to'ldiramiz, ularga bosish hodisasi qoplovchisini bog'lab:

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

Natijada, bizda 1000 ta qoplovchi bo'ladi. Bu juda ko'p. Optimallashtirish uchun biz faqat bitta qoplovchini ul tegi bog'lab, delegatsiya dan foydalanishimiz mumkin.

Buni qilaylik. Avvalo, shunchaki ro'yxat elementlarini yaratamiz:

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

Endi esa hodisa qoplovchisini delegatsiya qilamiz:

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

O'lchami 100 bo'yicha 100 bo'lgan HTML jadval yarating. Barcha kataklar bosilganda qizil rangga bo'yaladigan qiling.