JavaScript-ში ახალ ელემენტებზე მანიპულატორების დამატება

დავუშვათ, გვაქვს სია ul და ღილაკი:

html<ul>
  <li>ელემენტი</li>
  <li>ელემენტი</li>
  <li>ელემენტი</li>
  <li>ელემენტი</li>
  <li>ელემენტი</li>
</ul>

<button>დამატება</button>

მივიღოთ ჩვენი ელემენტები შესაბამის ცვლადებში:

javascriptlet button = document.querySelector('button');
let list   = document.querySelector('ul');
let items  = list.querySelectorAll('li');

გავაკეთოთ ისე, რომ ნებისმიერ li-ზე დაწკაპუნებისას მის ბოლოში დაემატოს ძახილის ნიშანი:

javascriptfor (let item of items) {
  item.addEventListener('click', function() {
    this.textContent = this.textContent + '!';
  });
}

ახლა გავაკეთოთ ისე, რომ ღილაკზე დაჭერისას სიის ბოლოს დაემატოს ახალი li:

javascriptbutton.addEventListener('click', function() {
  let item = document.createElement('li');
  item.textContent = 'ელემენტი';
  list.appendChild(item);
});

თუმცა, ჩვენ მივიღებთ პრობლემას: ახალად დამატებულ li-ზე დაწკაპუნება არ გამოიწვევს ძახილის ნიშნის დამატებას ბოლოში. საქმე ისაა, რომ ჩვენ ვამატებთ დაწკაპუნების მანიპულატორს მხოლოდ იმ li-ებზე, რომლებიც თავიდანვე არსებობდნენ, მაგრამ არა ახალებზე.

გამოვასწოროთ პრობლემა, ახალ li-ზე დავამატოთ დაწკაპუნების მანიპულატორი:

javascriptbutton.addEventListener('click', function() {
  let item = document.createElement('li');
  item.textContent = 'ელემენტი';
  
  item.addEventListener('click', function() { // დაწკაპუნების მანიპულატორი
    this.textContent = this.textContent + '!';
  });
  
  list.appendChild(item);
});

თუმცა, ახლა ფუნქცია-მანიპულატორის კოდი დუბლირდება ორ ადგილას - თავდაპირველად არსებული li-ებისთვის და ახალი ელემენტებისთვის. გამოვასწოროთ ეს, მისი ცალკე ფუნქციაში გამოყოფით:

javascriptfunction handler() {
  this.textContent = this.textContent + '!';
}

გამოვიყენოთ ჩვენი ფუნქცია, რათა თავიდან ავიცილოთ კოდის დუბლირება :

javascriptfor (let item of items) {
  item.addEventListener('click', handler);
}

button.addEventListener('click', function() {
  let item = document.createElement('li');
  item.textContent = 'ელემენტი';
  
  item.addEventListener('click', handler);
  
  list.appendChild(item);
});

პრინციპში, ამოცანა მოგვარებულია და ჩვენ თავიდან ავიცილეთ ფუნქცია-მანიპულატორის კოდის დუბლირება. თუმცა, მოვლენების მანიპულატორების დამატება მაინც უწევს ორ ადგილას: ციკლში არსებული li-ებისთვის და ღილაკზე დაწკაპუნებისას. შემდეგ გაკვეთილში განვიხილავთ ამ შეურაცხმყოფელობისგან თავის დაღწევის გზას.