Навескунии истеҳсолкунандаҳо бар элементҳои нав дар JavaScript

Бигзор мо як рӯйхати ul ва як тугма дорем:

html<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

<button>add</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 = 'item';
  list.appendChild(item);
});

Аммо, мо мушкилие хоҳем дошт: клик кардан бар li-и нави иловашуда ба илова шудани аломати сифари '!' ба охир нахоҳад анҷом дод. Масъала ин аст, ки мо истеҳсолкунандаи кликро танҳо барои он li-ҳое, ки аз аввал вуҷуд доштанд, илова мекунем, аммо ба навҳо не.

Мушкилиро ислоҳ мекунем, барои li-и нав истеҳсолкунандаи кликро насб кунем:

javascriptbutton.addEventListener('click', function() {
  let item = document.createElement('li');
  item.textContent = 'item';
  
  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';
  
  item.addEventListener('click', handler);
  
  list.appendChild(item);
});

Масъала умуман ҳал шуд ва мо аз такрори коди функсия-истеҳсолкунанда худдорӣ кардем. Аммо, насб кардани истеҳсолкунандаҳои рӯйдодҳо ҳамчун пеш ба мо дар ду ҷо воқеъ мешавад: ҳам дар ҳалқа барои li-ҳои мавҷуда, ҳам ҳангоми клик кардан бар тугма. Дар дарси оянда мо усули халосиро аз ин норасойӣ муҳокима хоҳем кард.