Καθολική Ανάθεση Γεγονότων σε JavaScript

Ο κώδικας που παρουσιάστηκε στο προηγούμενο μάθημα λειτουργεί, ωστόσο, δεν είναι χωρίς μειονεκτήματα. Ας αναλύσουμε αυτά τα μειονεκτήματα και ας γράψουμε μια πιο καθολική λύση.

Το μειονέκτημα του κώδικα μας θα εκδηλωθεί στην περίπτωση που μέσα στο li υπάρχουν εμφωλευμένες ετικέτες. Στην περίπτωσή μας, ας είναι οι ετικέτες i:

<ul>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
</ul>

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

Το πρόβλημα μπορεί να λυθεί με τη βοήθεια της μεθόδου closest:

list.addEventListener('click', function(event) {
	let li = event.target.closest('li');
	
	if (li) {
		li.innerHTML = li.innerHTML + '!';
	}
});

Επαναλάβετε την παρουσιαζόμενη λύση.