Делегирање догађаја у ЈаваСкрипту

У претходној лекцији је описана појава, која настаје када се додају нови елементи, и наведено је њено решење. У овој лекцији ћемо размотрити успешнији начин да се заобиђе тај проблем - делегирање догађаја. Хајде да га расправимо.

Као што већ знате, кликом на li, ми истовремено кликамо и на ul. То је могуће захваљујући избијању догађаја (event bubbling). Ми можемо искористити то за решавање нашег задатка: доделимо догађај не свакој 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 такође реаговати на клик.