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

100 көлөмүндөгү HTML таблица түзүңүз 100 менен. Ар бир уя чыкылдатууда кызыл түскө боёлушү керек.