მოვლენების დელეგირება 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 + '!';
});