JavaScript-dä täze elementlere işleýji gereklemek

Bizde bir sanaw ul we bir düwme bolsun:

html<ul>
  <li>element</li>
  <li>element</li>
  <li>element</li>
  <li>element</li>
  <li>element</li>
</ul>

<button>goş</button>

Elementlerimizi degişli üýtgeýjänlere alýarys:

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

Her bir li-e basylanynda, onyň ahyryna ýarym sada goşulýandyk etdiriň:

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

Indi düwmä basylanynda, sanawyň ahyryna täze li goşulýandyk etdiriň:

javascriptbutton.addEventListener('click', function() {
  let item = document.createElement('li');
  item.textContent = 'element';
  list.appendChild(item);
});

Emma, bir meselä duşarys: täze goşulan li-e basmak, ahyryna ýarym sada goşmaz. Sebäbi, biz wakalar işleýjisini diňe başdan bar bolan li-lere gerekledik, ýöne täzelerine däl.

Meseläni düzeliň, täze li-e basmak işleýjisini gereklemek bilen:

javascriptbutton.addEventListener('click', function() {
  let item = document.createElement('li');
  item.textContent = 'element';
  
  item.addEventListener('click', function() { // basmak işleýjisi
    this.textContent = this.textContent + '!';
  });
  
  list.appendChild(item);
});

Emma, indi işleýji funksiýanyň kody iki ýerde gaýtalanyp ýatyryldy - başdan bar bolan li-ler we täzeleri üçin. Ony aýry bir funksiýa çykaryp düzeliň:

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

Kod gaýtalamagyň öňüni almak üçin funksiýamyzy ulanyň:

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

button.addEventListener('click', function() {
  let item = document.createElement('li');
  item.textContent = 'element';
  
  item.addEventListener('click', handler);
  
  list.appendChild(item);
});

Mesele umumy taýdan çözüldi we biz işleýji funksiýanyň koduny gaýtalamagyň öňüni aldyk. Emma, wakalar işleýjilerini gereklemek hâlâ iki ýerde gerekli: bar bolan li-ler üçin aýlawda we düwmä basylanynda. Indiki sapakda bu ýaramazlykdan halas boluň usulyny seredýäris.