Навескунии истеҳсолкунандаҳо бар элементҳои нав дар JavaScript

Бигзор мо як рӯйхати ul ва як тугма дорем:

<ul>
	<li>item</li>
	<li>item</li>
	<li>item</li>
	<li>item</li>
	<li>item</li>
</ul>

<button>add</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 = 'item';
	list.appendChild(item);
});

Аммо, мо мушкилие хоҳем дошт: клик кардан бар li-и нави иловашуда ба илова шудани аломати сифари '!' ба охир нахоҳад анҷом дод. Масъала ин аст, ки мо истеҳсолкунандаи кликро танҳо барои он li-ҳое, ки аз аввал вуҷуд доштанд, илова мекунем, аммо ба навҳо не.

Мушкилиро ислоҳ мекунем, барои li-и нав истеҳсолкунандаи кликро насб кунем:

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

Масъала умуман ҳал шуд ва мо аз такрори коди функсия-истеҳсолкунанда худдорӣ кардем. Аммо, насб кардани истеҳсолкунандаҳои рӯйдодҳо ҳамчун пеш ба мо дар ду ҷо воқеъ мешавад: ҳам дар ҳалқа барои li-ҳои мавҷуда, ҳам ҳангоми клик кардан бар тугма. Дар дарси оянда мо усули халосиро аз ин норасойӣ муҳокима хоҳем кард.