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 басуға әсер ететініне көз жеткізіңіз.