addEventListener

Cara standar memasang event

addEventListener adalah cara modern dan disarankan untuk merespons event. Keunggulannya: satu elemen bisa punya banyak handler untuk event yang sama, dan HTML tetap bersih dari kode JavaScript.

let tombol = document.querySelector("button");

tombol.addEventListener("click", () => {
  console.log("Handler pertama");
});

tombol.addEventListener("click", () => {
  console.log("Handler kedua");
});
// klik sekali: kedua handler jalan berurutan

Dengan onclick, handler kedua akan menimpa yang pertama. Dengan addEventListener, keduanya berjalan.

Melepas listener

Untuk menghapus listener, kamu butuh referensi ke fungsi yang sama persis:

function sekaliSaja() {
  console.log("Hanya sekali!");
  tombol.removeEventListener("click", sekaliSaja);
}

tombol.addEventListener("click", sekaliSaja);

Pola ini berguna untuk aksi satu kali seperti tombol konfirmasi. Perhatikan: arrow function anonim tidak bisa di-remove karena tidak ada referensinya.

Opsi: once dan passive

// once: otomatis dilepas setelah jalan sekali
tombol.addEventListener("click", () => {
  console.log("Tidak akan jalan dua kali");
}, { once: true });

// passive: untuk scroll/touch yang tidak memanggil preventDefault
window.addEventListener("scroll", () => {
  console.log("Scroll...");
}, { passive: true });

Opsi once lebih rapi daripada pola removeEventListener manual. Opsi passive memberi tahu browser bahwa handler tidak akan membatalkan scroll, sehingga scrolling lebih mulus.

Catatan teknis: removeEventListener hanya berhasil jika fungsi, tipe event, dan opsi capture-nya sama persis dengan saat dipasang. Ini alasan lain kenapa handler yang mungkin dilepas harus disimpan dalam variabel bernama, bukan arrow function anonim inline.

Studi kasus: tombol like

Gabungkan listener dengan manipulasi DOM dan state sederhana:

let tombol = document.querySelector("#like");
let hitung = 0;
let disukai = false;

tombol.addEventListener("click", () => {
  disukai = !disukai; // saklar
  hitung += disukai ? 1 : -1;
  tombol.textContent = (disukai ? "♥ " : "♡ ") + hitung;
  tombol.classList.toggle("aktif", disukai);
});

Sekali klik mengubah tiga hal: angka, ikon, dan class untuk styling. Pola "toggle state lalu render ulang tampilan dari state" ini adalah inti cara kerja UI interaktif, termasuk di framework modern. State (disukai, hitung) adalah sumber kebenaran, DOM hanya cerminnya.

Listener pada banyak elemen

Pola umum memasang listener ke banyak elemen sekaligus:

document.querySelectorAll(".btn-beli").forEach(tombol => {
  tombol.addEventListener("click", () => {
    let nama = tombol.dataset.nama;
    console.log("Beli: " + nama);
  });
});

Atribut data-nama di HTML bisa dibaca lewat dataset.nama. Ini cara bersih membawa data per tombol tanpa ID unik. Untuk list yang sangat dinamis (tambah-hapus terus), pertimbangkan event delegasi sebagai gantinya.

Kesimpulan

Default ke addEventListener untuk semua event. Simpan handler dalam variabel bernama kalau suatu saat perlu dilepas, dan manfaatkan opsi once untuk aksi sekali jalan.