Vendosja e përpunuesve në elementët e rinj në JavaScript

Le të themi se kemi një listë ul dhe një buton:

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

<button>add</button>

Le të marrim elementët tanë në variablat përkatëse:

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

Le të bëjmë që me klikim në çdo li asaj t'i shtohet një pikëçuditëse në fund:

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

Tani le të bëjmë që me shtypje të butonit në fund të listës të shtohet një li e re:

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

Sidoqoftë, ne do të hasim një problem: klikimi në li të re të shtuar nuk do të çojë në shtimin e një pikëçuditëse në fund. Çështja është se ne shtojmë një përpunues klikimi vetëm për ato li që ekzistonin fillimisht, por jo për ato të reja.

Le ta rregullojmë problemin duke vendosur në li të re një përpunues klikimi:

button.addEventListener('click', function() {
	let item = document.createElement('li');
	item.textContent = 'item';
	
	item.addEventListener('click', function() { // përpunues klikimi
		this.textContent = this.textContent + '!';
	});
	
	list.appendChild(item);
});

Sidoqoftë, tani kodi i funksionit-përpunues dublikohet në dy vende - për li që ekzistonin fillimisht dhe për ato të reja. Le ta rregullojmë këtë duke e nxjerrë atë në një funksion të veçantë:

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

Le të përdorim funksionin tonë për të shmangur dublimin e kodit:

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

Në përgjithësi problemi është zgjidhur dhe kemi shmangur dublimin e kodit të funksionit-përpunues. Sidoqoftë, vendosja e përpunuesve të ngjarjeve na duhet të bëhet në dy vende: si në cikël për li ekzistuese, ashtu edhe në klikimin e butonit. Në mësimin vijues do të shqyrtojmë një mënyrë për të hequr qafe këtë shqetësim.