Додавање руковаоца догађајима на нове елементе у 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, и при клику на дугме. У следећој лекцији ћемо размотрити начин да се ослободимо овог незгоде.