Дэлегаванне падзей у 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 таксама будуць рэагаваць на клік.