Event listeners toevoegen aan nieuwe elementen in JavaScript

Stel we hebben een lijst ul en een knop:

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

<button>add</button>

We halen onze elementen op in de bijbehorende variabelen:

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

Laten we ervoor zorgen dat er bij een klik op een li een uitroepteken aan het einde wordt toegevoegd:

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

Laten we nu ervoor zorgen dat er bij een klik op de knop een nieuwe li aan het einde van de lijst wordt toegevoegd:

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

We krijgen echter een probleem: een klik op de nieuw toegevoegde li zal niet leiden tot het toevoegen van een uitroepteken aan het einde. Het punt is dat we de click event listener alleen toevoegen aan de li die aanvankelijk bestonden, maar niet aan de nieuwe.

We lossen het probleem op door een click event listener toe te voegen aan de nieuwe li:

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

Echter, nu wordt de code van de handler-functie gedupliceerd op twee plaatsen - voor de aanvankelijk bestaande li en voor de nieuwe. Laten we dit corrigeren door het in een aparte functie te plaatsen:

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

We gebruiken onze functie om duplicatie van code te voorkomen:

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

Het probleem is in principe opgelost en we hebben duplicatie van de handler-functie vermeden. Echter, we moeten nog steeds event listeners toevoegen op twee plaatsen: zowel in de lus voor bestaande li, als bij een klik op de knop. In de volgende les bespreken we een manier om van dit ongemak af te komen.