Menambahkan Penangan ke Elemen Baru dalam JavaScript

Misalkan kita memiliki daftar ul dan sebuah tombol:

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

<button>add</button>

Dapatkan elemen kita ke dalam variabel yang sesuai:

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

Mari kita atur sehingga ketika mengklik li mana pun tanda seru akan ditambahkan di akhirnya:

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

Sekarang mari kita atur sehingga ketika menekan tombol, li baru ditambahkan ke akhir daftar:

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

Namun, kita akan mendapatkan masalah: klik pada li baru yang ditambahkan tidak akan menyebabkan penambahan tanda seru di akhir. Masalahnya adalah kita menambahkan penangan klik hanya pada li yang awalnya ada, tapi tidak pada yang baru.

Mari perbaiki masalahnya dengan menambahkan penangan klik pada li baru:

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

Namun, sekarang kode fungsi penangan diduplikasi di dua tempat - untuk li yang awalnya ada dan untuk yang baru. Mari perbaiki ini dengan memindahkannya ke fungsi terpisah:

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

Gunakan fungsi kita untuk menghindari duplikasi kode:

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

Secara umum masalahnya teratasi dan kita telah menghindari duplikasi kode fungsi penangan. Namun, menambahkan penangan event masih harus dilakukan di dua tempat: dalam perulangan untuk li yang ada, dan saat mengklik tombol. Dalam pelajaran berikutnya kita akan membahas cara untuk menghilangkan ketidaknyamanan ini.