Делегиране на събития в 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 + '!';
});