Ανάθεση Γεγονότων σε JavaScript

Στο προηγούμενο μάθημα περιγράφηκε το πρόβλημα που προκύπτει κατά την προσθήκη νέων στοιχείων, και παρουσιάστηκε η λύση του. Σε αυτό το μάθημα θα εξετάσουμε έναν πιο κατάλληλο τρόπο για να παρακαμψούμε το πρόβλημα - ανάθεση γεγονότων. Ας το αναλύσουμε.

Όπως ήδη γνωρίζετε, κάνοντας κλικ σε ένα li, κάνουμε ταυτόχρονα κλικ και στο ul. Αυτό είναι δυνατό χάρη στην αναρρίχηση των γεγονότων. Μπορούμε να το χρησιμοποιήσουμε για να λύσουμε το πρόβλημά μας: θα προσαρτήσουμε το γεγονός όχι σε κάθε li, αλλά στον γονέα τους ul:

list.addEventListener('click', function() {
	
});

Τώρα στο χειριστή γεγονότων το this θα δείχνει στο στοιχείο στο οποίο είναι δεσμευμένο το χειριστής, και το event.target - στο στοιχείο στο οποίο συνέβη το γεγονός:

list.addEventListener('click', function(event) {
	console.log(this);         // η λίστα μας
	console.log(event.target); // το στοιχείο της λίστας
});

Ας κάνουμε έτσι ώστε το li στο οποίο έγινε το κλικ, να προστίθεται ένα θαυμαστικό στο τέλος:

list.addEventListener('click', function(event) {
	event.target.textContent = event.target.textContent + '!';
});

Επαναλάβετε την παρουσιαζόμενη λύση. Βεβαιωθείτε ότι τα νέα li θα αντιδρούν επίσης στο κλικ.