3 Trik Praktis Cara Menjalankan Event Hanya Sekali Javascript

Ditulis oleh JavaScript

Cara menjalankan event hanya sekali di JavaScript paling mudah memakai addEventListener dengan opsi { once: true }. Browser otomatis menghapus listener setelah event pertama terpanggil, jadi klik kedua dan seterusnya tidak menjalankan fungsi lagi.

Opsi ini berjalan di konteks browser JavaScript untuk DOM event seperti click, submit, dan input. Kalau butuh kontrol manual, pakai removeEventListener atau flag boolean.

Pakai Opsi once: true untuk Klik Sekali Jalan

Ikuti urutan ini agar listener benar-benar sekali jalan:

  1. Ambil elemen tombol dengan querySelector atau getElementById.
  2. Tambahkan addEventListener dengan tipe event click.
  3. Masukkan objek opsi { once: true } sebagai argumen ketiga.
const tombol = document.querySelector("#kirim");
tombol.addEventListener("click", () => {
  console.log("Terkirim sekali");
}, { once: true });

Kode di atas membuat tombol hanya merespons klik pertama. Klik berikutnya tidak memicu console.log lagi.

  • Browser menghapus listener otomatis setelah terpanggil satu kali.
  • Tidak perlu menulis removeEventListener sendiri.
  • Cocok untuk tombol kirim, klaim voucher, dan konfirmasi pembayaran.

BACA JUGA:

Lepas Listener Manual dengan removeEventListener

Metode ini berguna saat pelepasan listener bergantung kondisi tertentu, bukan langsung setelah satu event:

  1. Buat fungsi bernama, misalnya handleKlik.
  2. Daftarkan fungsi tersebut dengan addEventListener.
  3. Panggil removeEventListener memakai referensi fungsi yang sama di dalam handler.
const tombol = document.querySelector("#proses");

function handleKlik() {
  console.log("Diproses");
  tombol.removeEventListener("click", handleKlik);
}

tombol.addEventListener("click", handleKlik);
  • Gunakan fungsi bernama, bukan arrow function anonymous langsung di addEventListener.
  • Kesalahan umum: mendaftar dan melepas dengan fungsi beda referensi sehingga gagal dilepas.
  • Pola salah: addEventListener(“click”, () => {…}) lalu removeEventListener(“click”, () => {…}).

Perbandingan Metode Sekali Jalan

Metode Cocok Untuk Catatan
once: true Tombol sekali klik Otomatis dilepas browser
removeEventListener Berhenti karena kondisi Butuh referensi fungsi sama
Flag boolean Mencegah proses ganda Listener tetap terpasang
  • Pilih once ketika syaratnya sederhana: event boleh jalan satu kali lalu mati.
  • Pilih removeEventListener ketika listener harus dilepas dari fungsi lain atau setelah validasi.
  • Untuk tombol dinamis, pasang listener setelah elemen dibuat atau pakai event delegation dengan pemeriksaan flag di dalam handler.

FAQ

Apakah once: true bisa dipakai untuk semua event?

Ya, opsi ini berlaku untuk hampir semua DOM event seperti click, submit, input, dan keydown.

Bagaimana menjalankan event sekali lalu mengaktifkannya lagi?

Daftarkan ulang addEventListener setelah listener lama dilepas atau setelah proses selesai.

Kenapa removeEventListener tidak mematikan event saya?

Penyebab paling umum adalah fungsi yang dilepas bukan referensi yang sama dengan fungsi yang didaftarkan.

Artikel Terkait