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