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

enru