JavaScriptда ишлов беришчиларнинг оптималлаштирилиши

Ҳаддан ташқари кўп ишлов беришчилар, элементларга бириктирилган, кўп оператив хотирани ейди ва саҳифанинг секин ишлашига олиб келади.

Келгила, мисолда кўрайлик. Фароз қилайлик, бизда маълум рўйхат бор:

<ul></ul>

Ушбу рўйхатга ҳаволани ўзгарувчига оламиз:

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

Энди бизнинг рўйхатимизни li теглари билан тўлдирамиз, уларга клик ишлов беришчисини бириктириб:

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

Натижада, бизда 1000 ишлов беришчи бор. Бу жуда кўп. Оптималлаштириш учун биз фақат битта ишлов беришчини ul тегига бириктиришимиз мумкин, делегатлашдан фойдаланиб.

Бунни қилайлик. Аввало, оддийгина рўйхат элементларини яратамиз:

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

Энди ишлов беришчиларни делегатлашни бажарамиз:

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

HTML жадвал яратинг, ўлчами 100 га 100. Ҳар бир ката клик бўлганда қизил рангга бўёлишини таъминланг.