Cara Memahami Event di JavaScript Tanpa Bingung

Kamu menekan tombol yang sudah diberi warna menarik, tapi halaman diam saja. Atau form terkirim padahal kamu ingin menahannya dulu untuk validasi. Kejadian seperti ini hampir selalu berakar pada satu hal: event listener yang tidak terpasang dengan benar atau tertangkap oleh elemen lain. Memahami cara kerja event di JavaScript membuat masalah semacam ini mudah dilacak.

Event menghubungkan tindakan pengguna dengan kode yang kamu tulis. Tanpa pemahaman yang cukup, kamu akan menebak-nebak kenapa skrip tidak berjalan. Mari bedah konsepnya satu per satu.

Apa Itu Event dan Kenapa Perlu Dipahami

Event adalah sinyal yang dikirim browser ketika sesuatu terjadi di halaman: tombol diklik, input diisi, halaman selesai dimuat, atau jendela diubah ukurannya. JavaScript bisa mendengarkan sinyal itu lalu menjalankan fungsi tertentu.

Pola kerjanya mirip bel pintu. Kamu tidak perlu berdiri di depan pintu sepanjang hari menunggu tamu. Cukup pasang bel, lalu lakukan hal lain. Saat tamu menekan bel, barulah kamu bereaksi. Event listener bekerja dengan cara yang sama: kamu mendaftarkan fungsi, dan browser memanggilnya saat event terjadi.

Tanpa event, halaman web hanya dokumen statis. Semua interaksi, dari menu dropdown sampai validasi form, bergantung pada mekanisme ini.

Memasang Event Listener dengan addEventListener

Cara paling aman memasang event adalah lewat addEventListener. Metode ini memungkinkan beberapa fungsi menangani event yang sama tanpa saling menimpa.

<button id="simpan">Simpan</button>

<script>
  const tombol = document.getElementById('simpan');

  tombol.addEventListener('click', function () {
    console.log('Data disimpan');
  });
</script>

Fungsi di dalamnya disebut handler atau callback. Kamu bisa menambahkan lebih dari satu handler untuk event yang sama, dan semuanya akan dijalankan sesuai urutan pemasangan.

Hindari atribut onclick langsung di HTML. Selain mencampur struktur dan perilaku, atribut itu hanya bisa menampung satu handler. Kalau kamu memakai cara lama seperti element.onclick = ..., handler sebelumnya akan tertimpa tanpa peringatan.

Jenis Event yang Sering Dipakai

Tidak perlu menghafal semuanya. Sebagian besar pekerjaan sehari-hari hanya membutuhkan beberapa event berikut.

click untuk tombol, tautan, dan elemen yang bisa ditekan.
input dipicu setiap kali nilai input berubah, cocok untuk pencarian langsung.
change dipicu setelah nilai input selesai diubah dan elemen kehilangan fokus, umum untuk select dan checkbox.
submit terjadi saat form dikirim, tempat kamu menahan pengiriman untuk validasi.
keydown dan keyup untuk menangkap tombol keyboard.
DOMContentLoaded menandakan HTML selesai diparse dan aman untuk dimanipulasi.

Memilih event yang tepat menentukan kapan kodemu berjalan. Memakai change untuk fitur pencarian real-time akan terasa lambat karena baru terpicu saat pengguna menekan Tab atau klik di luar input. Untuk kasus itu, input lebih sesuai.

Membaca Object Event

Setiap handler menerima satu argumen berisi informasi tentang kejadian tersebut. Biasanya diberi nama event atau e.

document.querySelector('form').addEventListener('submit', function (e) {
  e.preventDefault();
  const isi = document.querySelector('#nama').value;
  console.log('Nama:', isi);
});

Beberapa properti yang sering dipakai:

e.target merujuk elemen yang memicu event.
e.currentTarget merujuk elemen tempat listener dipasang.
e.preventDefault() membatalkan perilaku bawaan browser, misalnya pengiriman form atau navigasi tautan.
e.key berisi nama tombol keyboard yang ditekan.

Perbedaan target dan currentTarget baru terasa saat kamu memasang listener pada elemen induk. Nilai target bisa jadi anak dari elemen tersebut.

Event Bubbling dan Cara Menghentikannya

Saat kamu mengklik tombol di dalam div, event tidak berhenti di tombol. Browser menjalankannya pada tombol, lalu naik ke induknya, kakeknya, hingga ke document. Perjalanan naik ini disebut bubbling.

Bubbling sering dimanfaatkan untuk event delegation: memasang satu listener pada wadah, lalu memeriksa e.target untuk mengetahui elemen mana yang diklik. Teknik ini berguna saat daftar berisi banyak item yang bisa bertambah atau berkurang.

document.querySelector('#daftar').addEventListener('click', function (e) {
  if (e.target.tagName === 'LI') {
    e.target.classList.toggle('selesai');
  }
});

Kalau kamu ingin event berhenti merambat ke induk, panggil e.stopPropagation(). Gunakan seperlunya. Terlalu banyak menghentikan propagasi membuat alur event sulit dilacak ketika proyek membesar.

Kesalahan Umum Pemula dan Cara Menghindarinya

Sebagian besar bug event muncul karena hal yang sama berulang kali. Beberapa di antaranya:

Memasang listener sebelum elemen ada di DOM. Skrip yang ditempatkan di <head> tanpa menunggu DOMContentLoaded akan mencari elemen yang belum dibuat.
Lupa memanggil fungsi. Menulis addEventListener('click', simpan()) akan langsung menjalankan fungsi, bukan mendaftarkannya. Hapus tanda kurungnya.
Menggunakan this di dalam arrow function dan mengharapkan elemen yang diklik. Arrow function tidak memiliki konteks this sendiri, jadi pakai e.currentTarget.
Memasang listener berulang di dalam loop atau fungsi render sehingga handler menumpuk. Selalu cek apakah listener sudah pernah dipasang, atau pasang sekali di luar loop.

Saat perilaku event terasa aneh, membuka DevTools dan memeriksa elemen yang dituju biasanya langsung menunjukkan sumbernya. Kalau pesan error membingungkan, panduan tips debugging JavaScript untuk pemula bisa membantu membaca jejak kesalahannya.

Untuk event yang menghasilkan banyak nilai, misalnya dari beberapa input sekaligus, kamu mungkin perlu mengolah data yang terkumpul. Teknik di cara menggabungkan array di JavaScript berguna ketika hasilnya harus disatukan sebelum dikirim.

Merapikan Kode Event agar Mudah Dirawat

Menulis handler langsung di dalam addEventListener cepat, tapi cepat pula berantakan saat logikanya bertambah. Pisahkan fungsi handler dengan nama yang jelas, lalu daftarkan.

function tanganiKlikSimpan(e) {
  e.preventDefault();
  simpanData();
}

document.querySelector('#simpan').addEventListener('click', tanganiKlikSimpan);

Pemisahan ini memudahkan pengujian dan memungkinkan kamu melepas listener dengan removeEventListener memakai referensi fungsi yang sama. Ini penting untuk komponen yang dipasang dan dilepas berkali-kali, misalnya modal atau tab.

Event JavaScript pada dasarnya adalah kesepakatan antara browser dan kodemu: kamu mendaftarkan fungsi, browser memanggilnya saat kejadian berlangsung. Kuasai addEventListener, pahami object event, dan sadari alur bubbling. Tiga hal itu sudah menutup sebagian besar kebingungan yang muncul saat pertama kali menangani interaksi di halaman web.

Pertanyaan yang Sering Diajukan

Kenapa event click tidak berjalan pada elemen yang baru dibuat?

Karena listener dipasang pada elemen yang sudah ada saat kode dijalankan. Elemen baru belum memiliki listener. Solusinya pasang listener pada induk yang sudah ada dan gunakan event delegation dengan memeriksa e.target.

Apa bedanya preventDefault dan stopPropagation?

preventDefault membatalkan aksi bawaan browser seperti pengiriman form atau membuka tautan. stopPropagation menghentikan event agar tidak merambat ke elemen induk. Keduanya menyelesaikan masalah yang berbeda dan bisa dipakai bersamaan.

Apakah perlu melepas event listener?

Untuk halaman biasa yang dimuat sekali, tidak wajib. Pelepasan menjadi penting ketika elemen dibuat dan dihapus berulang kali dalam satu sesi, misalnya pada aplikasi dengan banyak komponen dinamis, agar memori tidak menumpuk.