Delegasi event dan submit formulir

Peristiwa tidak berhenti di elemen yang diklik. Setelah penanggap di elemen itu berjalan, peristiwanya naik ke induk, lalu ke induk berikutnya, sampai document. Gerak naik ini disebut bubbling, dan ia membuka satu pola: pasang satu penanggap di induk, bukan satu penanggap per anak.

const keranjang = document.querySelector("#keranjang");

keranjang.addEventListener("click", (e) => {
  const tombol = e.target.closest(".hapus");
  if (!tombol) return; // klik di luar tombol hapus
  const baris = tombol.closest("li");
  console.log(`hapus barang ${baris.dataset.id}`);
  baris.remove();
});

Di dalam penanggap, e.target adalah elemen yang sebenarnya diklik, dan e.currentTarget adalah elemen tempat penanggap dipasang. Method closest(pemilih) mencari mulai dari elemen itu sendiri ke arah induk-induknya dan mengembalikan yang pertama cocok, atau null. Pola ini disebut delegasi event. Baris yang ditambahkan belakangan ikut tertangani tanpa penanggap baru, karena peristiwanya tetap naik ke induk yang sama. Atribut data-id="12" dibaca lewat dataset sebagai teks: baris.dataset.id memberi "12".

Formulir punya peristiwa submit, yang terjadi di elemen form saat tombol kirim ditekan; menekan Enter di isian teks juga lazim memicunya. Bawaan browser adalah mengirim data lalu memuat halaman baru. Memanggil e.preventDefault() di penanggap submit membatalkan bawaan itu, sehingga JavaScript bisa memeriksa isian dan menambah baris di halaman yang sama. Karena itu penanggapnya dipasang di form, bukan di klik tombol.