JavaScript'te Yeni Öğelere Olay İşleyicileri Eklemek

Bir ul listemiz ve bir butonumuz olduğunu varsayalım:

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

<button>add</button>

Öğelerimizi ilgili değişkenlere alalım:

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

Herhangi bir li'ye tıklandığında sonuna bir ünlem işareti eklenmesini sağlayalım:

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

Şimdi butona basıldığında listenin sonuna yeni bir li eklenmesini sağlayalım:

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

Ancak bir sorunla karşılaşacağız: Yeni eklenen bir li'ye tıklamak, sonuna ünlem işareti eklenmesine yol açmayacak. Sebebi şu: click olay işleyicisini sadece başlangıçta var olan li öğelerine ekledik, ama yeni olanlara eklemedik.

Sorunu, yeni li öğesine bir click olay işleyicisi ekleyerek düzeltelim:

javascriptbutton.addEventListener('click', function() {
  let item = document.createElement('li');
  item.textContent = 'item';
  
  item.addEventListener('click', function() { // click olay işleyicisi
    this.textContent = this.textContent + '!';
  });
  
  list.appendChild(item);
});

Ancak şimdi, olay işleyici fonksiyonunun kodu iki yerde yineleniyor - başlangıçta var olan li öğeleri ve yeni olanlar için. Bunu, kodu ayrı bir fonksiyona alarak düzeltelim:

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

Kod tekrarından kaçınmak için fonksiyonumuzu kullanalım:

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);
});

Problem genel olarak çözüldü ve olay işleyici fonksiyonunun kod tekrarından kaçındık. Ancak, olay işleyicilerini eklemek yine de iki yerde yapmamız gerekiyor: hem mevcut li öğeleri için döngüde, hem de butona tıklandığında. Bir sonraki derste, bu rahatsızlıktan kurtulmanın bir yolunu inceleyeceğiz.