Agar Tidak Bocor Memori, Cara Menghapus Event Listener yang Benar Javascript

Ditulis oleh JavaScript

Cara menghapus event listener yang benar di JavaScript adalah memanggil removeEventListener dengan referensi fungsi yang sama persis seperti saat dipasang. Listener yang dipasang memakai fungsi anonim atau arrow function inline tidak bisa dilepas karena browser menganggapnya fungsi berbeda.

Syarat removeEventListener Bisa Berhasil

Browser mencocokkan listener berdasarkan tiga hal yang harus sama:

  • target elemen sama, misalnya tombol yang sama.
  • tipe event sama, misalnya click.
  • referensi fungsi sama, plus nilai capture sama.
// SALAH: tidak bisa dihapus
btn.addEventListener("click", () => console.log("klik"));
btn.removeEventListener("click", () => console.log("klik"));

// BENAR: referensi sama
function handleKlik() {
  console.log("klik");
}
btn.addEventListener("click", handleKlik);
btn.removeEventListener("click", handleKlik);

Dua arrow function di contoh salah terlihat identik, tetapi tersimpan di alamat memori berbeda.

Langkah Menghapus Listener dengan Fungsi Bernama

1. Simpan fungsi di variabel atau deklarasi bernama, contoh function handleKlik().
2. Pasang dengan addEventListener("click", handleKlik).
3. Lepas dengan removeEventListener("click", handleKlik) memakai variabel sama.
4. Verifikasi dengan mengklik tombol, tidak ada respons yang jalan berarti listener sudah lepas.

BACA JUGA:

Kasus Gagal Umum dan Solusinya

Tiga penyebab paling sering adalah fungsi anonim, hasil bind() baru, dan beda nilai capture.

Masalah Penyebab Solusi
Listener anonim tidak hilang Arrow inline membuat referensi baru Pindah ke fungsi bernama
bind tidak terhapus bind() tiap panggil hasilkan fungsi beda Simpan hasil bind di variabel
Capture beda Pasang true, hapus false Samakan flag capture 
const boundKlik = handleKlik.bind(this);
btn.addEventListener("click", boundKlik);
btn.removeEventListener("click", boundKlik);

Pola Bersih untuk Listener Sekali Pakai dan Dinamis

Gunakan opsi bawaan atau pengelompokan agar kode tidak penuh panggilan hapus manual:

  • Pakai { once: true } untuk handler yang hanya jalan sekali, misalnya tombol klaim voucher.
  • Simpan referensi handler untuk tombol on/off, misalnya mode edit peta.
  • Gunakan AbortController untuk melepas banyak listener sekaligus saat komponen ditutup.
  • Pakai event delegation saat elemen dibuat dinamis, pasang satu listener di induk lalu cek event.target.
const controller = new AbortController();
btn.addEventListener("click", handleKlik, { signal: controller.signal });
controller.abort();

FAQ

Apakah removeEventListener butuh parameter yang sama persis?

Ya, target, tipe event, fungsi, dan flag capture harus sama.

Bisakah menghapus listener anonim?

Tidak bisa, kecuali referensinya sempat disimpan dulu di variabel.

Kapan memakai once dibanding removeEventListener manual?

Pakai once: true bila handler memang hanya perlu jalan satu kali.

Artikel Terkait