JavaScript-ում նոր տարրերի իրադարձությունների մշակման կցում

Ենթադրենք ունենք ul ցուցակ և կոճակ.

<ul>
	<li>տարր</li>
	<li>տարր</li>
	<li>տարր</li>
	<li>տարր</li>
	<li>տարր</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 = 'տարր';
	list.appendChild(item);
});

Սակայն մենք կստանանք խնդիր. նոր ավելացված li-ի վրա կտտացնելը չի հանգեցնի բացականչական նշանի ավելացմանը դրա վերջում: Բանն այն է, որ մենք ավելացնում ենք կտտացման մշակիչ միայն այն li-ների համար, որոնք գոյություն ունեին սկզբնապես, բայց ոչ նորերի համար:

Ուղղենք խնդիրը՝ նոր li-ի վրա ավելացնելով կտտացման մշակիչ.

button.addEventListener('click', function() {
	let item = document.createElement('li');
	item.textContent = 'տարր';
	
	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 = 'տարր';
	
	item.addEventListener('click', handler);
	
	list.appendChild(item);
});

Խնդիրը ընդհանուր առմամբ լուծված է, և մենք խուսափեցինք մշակիչ-ֆունկցիայի կոդի կրկնօրինակումից: Սակայն, իրադարձությունների մշակիչների ավելացումը մենք դեռ ստիպված ենք կատարել երկու տեղում. և ցիկլում գոյություն ունեցող li-ների համար, և կոճակի վրա կտտացնելիս: Հաջորդ դասում մենք կքննարկենք այս անհարմարությունից ազատվելու միջոցը: