# Делегирование событий в 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` также будут реагировать на клик.

←→
↑
en ru