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 + '!';
});