Uniwersalne delegowanie zdarzeń w JavaScript

Kod przedstawiony w poprzedniej lekcji jest działający, jednak nie jest pozbawiony wad. Przeanalizujmy te wady i napiszmy bardziej uniwersalne rozwiązanie.

Wada naszego kodu ujawni się w przypadku, gdy wewnątrz li znajdują się zagnieżdżone znaczniki. W naszym przypadku niech będą to znaczniki 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>

W tym przypadku kliknięcie na znacznik i spowoduje dodanie wykrzyknika na końcu znacznika i, a nie znacznika li, jak byśmy chcieli - ponieważ do event.target trafia dokładnie ten znacznik, w którym zdarzenie wystąpiło.

Problem można rozwiązać za pomocą metody closest:

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

Powtórz przedstawione rozwiązanie.