Делегирование событий в JavaScript

В предыдущем уроке была описана проблема, возникающая при добавлении новых элементов, и приведено ее решение. В данном уроке мы рассмотрим более удачный способ обойти проблему - делегирование событий. Давайте его разберем.

Как вы уже знаете, кликая на li, мы одновременно кликаем и на ul. Это возможно благодаря всплытию событий. Мы можем использовать это для решения нашей задачи: навесим событие не на каждую li, а на их родителя ul:

javascriptlist.addEventListener('click', function() {
  
});

Теперь в обработчике события this будет указывать на элемент, к которому привязан обработчик, а event.target - на элемент, в котором случилось событие:

javascriptlist.addEventListener('click', function(event) {
  console.log(this);         // наш список
  console.log(event.target); // пункт списка
});

Сделаем так, чтобы li, на которой случился клик, в конец добавлялся восклицательный знак:

javascriptlist.addEventListener('click', function(event) {
  event.target.textContent = event.target.textContent + '!';
});