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

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

←→
↑
en ru