JavaScriptтеги окуяларды делегациялоо

Акыркы сабакта жаңы элементтер кошулганда пайда болгон көйгөй сүрөттөлгөн жана анын чечими келтирилген. Бул сабакта биз көйгөйдү чечүүнүн мыктыраак жолун карайбыз - окуяларды делегациялоо. Келгиле, аны талдап көрөлү.

Билгендей эле, li бөлүгүнө чыкылдаганда, биз бир эле учурда ul бөлүгүнө да чыкылдайбыз. Бул окуялардын жогору көтөрүлүшүнөн (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 бөлүктөрү дагы чыкылдатууга жооп берерин текшерип көргүлө.