JavaScript-да янги элементларга ишловчиларни қўйиш

Фарз қилайлик, бизда ul рўйхати ва тугма мавжуд:

<ul>
	<li>element</li>
	<li>element</li>
	<li>element</li>
	<li>element</li>
	<li>element</li>
</ul>

<button>қўшиш</button>

Элементларимизни мос ўзгаргувчиларга оламиз:

let button = document.querySelector('button');
let list   = document.querySelector('ul');
let items  = list.querySelectorAll('li');

Қандайдир li устига босилганда унга ҳайқалнуш белгиси қўшилишини таъминлаймиз:

for (let item of items) {
	item.addEventListener('click', function() {
		this.textContent = this.textContent + '!';
	});
}

Энди тугма босилганда рўйхатнинг охирига янги li қўшиладиган қилиб қўйайлик:

button.addEventListener('click', function() {
	let item = document.createElement('li');
	item.textContent = 'element';
	list.appendChild(item);
});

Бирок, биз муаммога дуч келамиз: янги қўшилган li устига босилганда охирига ҳайқалнуш белгиси қўшилмайди. Сабаби, биз босилши вокеасининг ишловчисини фақат бошланғичда мавжуд бўлган li элементларига қўйямиз, лекин янгиларига эмас.

Муаммони тузатамиз, янги li устига босилши ишловчисини қўйиб:

button.addEventListener('click', function() {
	let item = document.createElement('li');
	item.textContent = 'element';
	
	item.addEventListener('click', function() { // босилши ишловчиси
		this.textContent = this.textContent + '!';
	});
	
	list.appendChild(item);
});

Бирок, энди функция-ишловчи коди икки жойда такрорланмоқда - бошланғичда мавжуд бўлган li учун ва янгилар учун. Буни тузатамиз, уни алохида функцияга чиқариб:

function handler() {
	this.textContent = this.textContent + '!';
}

Кодни такрорланишини олди олиш учун бизнинг функциямиздан фойдаланамиз:

for (let item of items) {
	item.addEventListener('click', handler);
}

button.addEventListener('click', function() {
	let item = document.createElement('li');
	item.textContent = 'element';
	
	item.addEventListener('click', handler);
	
	list.appendChild(item);
});

Масала умумән ҳал бўлди ва биз функция-ишловчи кодининг такрорланишини олди олдик. Бирок, вокеа ишловчиларини қўйиш бизга баробар икки жойда тўғри келмоқда: мавжуд li учун циклда ва тугма босилганда. Кейинги дарсда биз бу қулайсизликдан халос бўлиш усулини кўриб чиқамиз.