Универсальное делегирование событий в 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 + '!';
	}
});

Повторите приведенное решение.