Делегиране на събития в 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 също ще реагират на кликване.