Оптимизацияи обработчикони ҳодисаҳо дар 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 эҷод кунед. Ҳар як ячейка бо клик кардан ба ранги сурх табдил ёбад.