Att lägga till händelsehanterare på nya element i JavaScript

Låt oss säga att vi har en lista ul och en knapp:

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

<button>add</button>

Låt oss hämta våra element till motsvarande variabler:

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

Låt oss göra så att när man klickar på vilken li som helst så läggs ett utropstecken till i slutet:

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

Låt oss nu göra så att när man klickar på knappen läggs en ny li till i slutet av listan:

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

Vi kommer dock att stöta på ett problem: ett klick på den nya tillagda li kommer inte att leda till att ett utropstecken läggs till i slutet. Anledningen är att vi lägger till klickhanteraren bara på de li som fanns från början, men inte på de nya.

Låt oss åtgärda problemet genom att lägga till en klickhanterare på den nya li:

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

Men nu dupliceras koden för hanterarfunktionen på två ställen - för de ursprungligen befintliga li och för de nya. Låt oss åtgärda detta genom att flytta den till en separat funktion:

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

Låt oss använda vår funktion för att undvika kodduplicering:

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

Problemet är i princip löst och vi har undvikit duplicering av hanterarfunktionens kod. Men vi måste fortfarande lägga till händelsehanterare på två ställen: både i loopen för befintliga li och vid klick på knappen. I nästa lektion kommer vi att gå igenom ett sätt att bli av med denna obekvämlighet.