Προσθήκη Event Listeners σε Νέα Στοιχεία σε 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 δεν θα προκαλεί την προσθήκη θαυμαστικού στο τέλος. Ο λόγος είναι ότι προσθέτουμε event listener για το κλικ μόνο σε εκείνα τα li που υπήρχαν αρχικά, αλλά όχι στα νέα.

Ας διορθώσουμε το πρόβλημα, προσθέτοντας στο νέο li event listener για κλικ:

button.addEventListener('click', function() {
	let item = document.createElement('li');
	item.textContent = 'item';
	
	item.addEventListener('click', function() { // event listener κλικ
		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);
});

Το πρόβλημα μπορεί να θεωρηθεί λυμένο και αποφύγαμε τον διπλασιασμό κώδικα της συνάρτησης-επεξεργαστή. Ωστόσο, η προσθήκη event listeners πρέπει ακόμα να γίνεται σε δύο σημεία: τόσο στον βρόχο για τα υπάρχοντα li, όσο και στο κλικ στο κουμπί. Στο επόμενο μάθημα θα δούμε έναν τρόπο να ξεφορτωθούμε αυτή τη δυσκολία.