Mengenal Event jQuery: click, change, dan submit

Tombol yang tidak merespons, formulir yang terkirim padahal masih ada isian salah, atau dropdown yang perubahannya tidak tercatat. Masalah-masalah itu biasanya berakar pada event yang tidak terpasang atau tertangani dengan benar. Di jQuery, event click, change, dan submit adalah tiga yang paling sering dipakai, dan menguasainya akan memangkas banyak debugging.

Cara Memasang Event jQuery dengan .on()

Sejak jQuery 1.7, metode .on() menjadi cara utama untuk memasang event handler. Metode lama seperti .click() atau .change() masih ada, tetapi .on() lebih fleksibel karena mendukung delegasi dan beberapa event sekaligus.

$('#tombolSimpan').on('click', function() {
  console.log('Tombol diklik');
});

Handler menerima objek event sebagai argumen. Objek ini membawa informasi seperti target elemen, tombol mouse yang ditekan, dan koordinat klik. Kamu bisa mengaksesnya dengan parameter pertama, misalnya function(event).

Event click: Menangani Klik pada Elemen

Event click dipicu saat pengguna mengklik elemen dengan mouse atau menyentuhnya di layar sentuh. Di dalam handler, kata kunci this merujuk ke elemen DOM yang menjadi target, sehingga kamu bisa memanipulasinya langsung.

$('.kartu').on('click', function() {
  $(this).toggleClass('aktif');
});

Jika elemen yang diklik berada di dalam elemen lain, event akan merambat ke atas (bubbling). Artinya, klik pada anak elemen juga memicu handler pada induknya. Untuk menghentikan perambatan, panggil event.stopPropagation(). Namun, gunakan hanya jika benar-benar perlu, karena bisa mengganggu event lain yang mungkin bergantung pada bubbling.

Untuk mencegah aksi default, misalnya tautan yang berpindah halaman, gunakan event.preventDefault(). Ini sering dipakai pada tautan yang dijadikan tombol aksi.

Event change: Mendeteksi Perubahan Nilai

Event change terpicu ketika nilai sebuah input, select, atau textarea berubah dan elemen kehilangan fokus. Untuk input teks, event ini baru muncul setelah pengguna menekan Tab atau mengklik di luar input, bukan setiap kali mengetik. Jika kamu perlu merespons setiap ketikan, gunakan event input.

$('#kota').on('change', function() {
  var nilai = $(this).val();
  console.log('Kota dipilih: ' + nilai);
});

Pada elemen select, change dipicu segera setelah pilihan berubah. Ini berguna untuk memuat data dinamis, misalnya daftar kecamatan berdasarkan kota yang dipilih. Pastikan untuk mengambil nilai terbaru dengan .val() di dalam handler.

Event submit: Mengendalikan Formulir

Event submit terjadi saat formulir akan dikirim, baik melalui tombol submit maupun dengan menekan Enter di input teks. Handler submit memungkinkan kamu memvalidasi data sebelum mengirimkannya ke server.

$('#formPendaftaran').on('submit', function(event) {
  event.preventDefault();
  var nama = $('#nama').val().trim();
  if (nama === '') {
    alert('Nama wajib diisi');
    return;
  }
  // lanjutkan pengiriman via AJAX
});

Memanggil event.preventDefault() di dalam handler submit akan membatalkan pengiriman formulir secara default. Kamu bisa menggantinya dengan pengiriman melalui AJAX atau memproses data di sisi klien. Pastikan untuk tetap menyediakan fallback jika JavaScript gagal dimuat.

Delegasi Event untuk Elemen Dinamis

Elemen yang ditambahkan setelah halaman dimuat tidak akan memiliki handler jika kamu memasangnya langsung pada elemen tersebut. Solusinya adalah delegasi event: pasang handler pada induk yang sudah ada, lalu sebutkan selektor anak sebagai argumen kedua .on().

$('#daftarItem').on('click', '.item', function() {
  $(this).remove();
});

Dengan cara ini, item baru yang ditambahkan ke #daftarItem secara otomatis akan memiliki handler klik. Delegasi juga mengurangi jumlah handler yang dipasang, sehingga lebih efisien untuk daftar panjang. Ingat bahwa selektor anak harus cocok dengan elemen target agar handler dijalankan.

Jika kamu perlu memilih elemen dengan lebih spesifik, pelajari cara memilih elemen dengan selector jQuery untuk memastikan delegasi bekerja tepat sasaran.

Melepas Event Handler

Handler yang tidak lagi diperlukan sebaiknya dilepas untuk menghindari kebocoran memori atau eksekusi ganda. Gunakan .off() dengan event dan selektor yang sama seperti saat memasangnya.

$('#tombolSimpan').off('click');

Jika kamu memasang beberapa handler, .off() tanpa argumen akan melepas semuanya. Untuk melepas handler tertentu, simpan referensi fungsinya atau gunakan namespace event, misalnya .on(‘click.namaHandler’, fn) lalu .off(‘click.namaHandler’).

Ringkasan

Event click, change, dan submit adalah fondasi interaksi di jQuery. Pasang handler dengan .on(), gunakan delegasi untuk elemen dinamis, dan kendalikan aksi default dengan preventDefault. Melepas handler yang tidak terpakai menjaga performa halaman. Untuk animasi yang dipicu event, lihat memilih metode animasi jQuery agar transisi terasa lebih halus.

Pertanyaan yang Sering Diajukan

Apa perbedaan antara event click dan change?

Click terjadi saat elemen diklik, sedangkan change terjadi saat nilai input berubah dan kehilangan fokus. Keduanya memiliki konteks penggunaan yang berbeda.

Bagaimana cara mencegah formulir terkirim saat validasi gagal?

Panggil event.preventDefault() di dalam handler submit sebelum melakukan validasi. Jika validasi gagal, kembalikan fungsi lebih awal atau tampilkan pesan kesalahan.

Apakah .click() masih boleh digunakan?

Masih berfungsi, tetapi .on(‘click’, …) lebih disarankan karena mendukung delegasi dan konsisten dengan metode event lainnya. Gunakan .click() hanya untuk memicu event secara programatik.