Event Object

Setiap event membawa data

Saat event terjadi, browser membuat object berisi detail kejadian itu dan mengirimnya ke handler sebagai argumen pertama. Biasa dinamai e, evt, atau event.

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

tombol.addEventListener("click", (e) => {
  console.log(e.type);   // "click"
  console.log(e.target); // elemen yang diklik
});

e.target: siapa yang memicu?

target adalah elemen yang sebenarnya memicu event. Ini penting terutama untuk event delegasi (modul berikutnya):

document.querySelector("ul").addEventListener("click", (e) => {
  console.log("Yang diklik: " + e.target.textContent);
});

Bedakan dengan e.currentTarget yang selalu merujuk ke elemen tempat listener dipasang.

e.preventDefault: batalkan aksi bawaan

Beberapa elemen punya perilaku bawaan: link pindah halaman, form me-reload halaman. preventDefault membatalkannya:

let form = document.querySelector("form");
form.addEventListener("submit", (e) => {
  e.preventDefault(); // jangan reload halaman
  console.log("Form diproses via JavaScript");
});

let link = document.querySelector("a");
link.addEventListener("click", (e) => {
  e.preventDefault(); // jangan pindah halaman
  console.log("Link diklik tapi ditahan");
});

Ini fondasi SPA dan validasi form custom: cegah aksi bawaan, tangani sendiri dengan JavaScript.

Info spesifik per event

// keyboard: tombol apa yang ditekan?
document.addEventListener("keydown", (e) => {
  console.log(e.key); // "Enter", "a", "Escape"
});

// mouse: posisi kursor
document.addEventListener("click", (e) => {
  console.log(e.clientX, e.clientY); // koordinat di viewport
});

Properti e.key jauh lebih mudah dibaca daripada kode angka lama seperti e.keyCode yang sudah deprecated.

Catatan teknis: e.target bisa berupa elemen anak di dalam elemen yang dipasang listener. Misalnya listener di div berisi span, klik span membuat e.target = span. Kalau kamu butuh elemen tempat listener dipasang, pakai e.currentTarget. Untuk delegasi yang aman, kombinasikan e.target dengan closest().

Studi kasus: cegah submit kosong

Manfaatkan event object untuk validasi sebelum submit:

let form = document.querySelector("#form-komentar");

form.addEventListener("submit", (e) => {
  let teks = document.querySelector("#komentar").value.trim();

  if (teks.length < 5) {
    e.preventDefault(); // batalkan submit!
    document.querySelector("#pesan-error").textContent =
      "Komentar minimal 5 karakter (sekarang: " + teks.length + ")";
    return;
  }
  console.log("Terkirim: " + teks);
});

Tanpa preventDefault, form akan reload halaman dan pesan error tidak sempat terbaca. Dengan preventDefault, kamu memegang kendali penuh: validasi dulu, kirim hanya kalau lolos. Ini fondasi semua form interaktif modern.

Kesimpulan

Event object menjawab tiga pertanyaan: apa yang terjadi (type), siapa pemicunya (target), dan detail tambahannya (key, clientX, dll). Kuasai preventDefault karena ia gerbang menuju interaksi custom.