Events & Event Handling dalam JavaScript

Tanpa event, website kita cuma halaman statis — teks dan gambar yang terpajang tanpa interaksi apa pun. Bayangin Anda klik tombol tapi nggak terjadi apa-apa. Nggak seru, kan? Di sinilah event bekerja: membuat halaman web merespons tindakan user — klik, ketik, hover, submit form, dan sebagainya.

Artikel ini adalah penutup seri JavaScript kita. Kita akan bedah cara kerja event, berbagai jenis event yang sering dipakai, dan cara handle event dengan addEventListener. Siap? Let’s go!

1. Event Itu Apa?

Event adalah sesuatu yang terjadi pada element di halaman web. User klik tombol? Itu event. User ketik di form? Itu event juga. Cursor masuk ke gambar? Event lagi.

Bayangkan event seperti bel pintu: ketika ada tamu datang (user klik), bel berbunyi (event handler jalan). Anda tinggal tentukan aksi apa yang dilakukan ketika bel itu berbunyi.

Tanpa event handler, klik tombol tidak akan melakukan apa pun — sama kayak bel pintu yang dipasang tapi nggak disambung ke lonceng.

2. Cara Pasang Event Handler

JavaScript punya tiga cara utama untuk menangani event. Mari kita bahas satu per satu.

Inline Event Handler (Tapi Jangan)

Cara paling awal — menulis event langsung di HTML:

<button onclick="alert('Halo!')">Klik Saya</button>

Cara ini bisa dipakai, tapi tidak direkomendasikan karena:

Menggabungkan JavaScript dan HTML dalam satu file
Sulit di-maintain kalau project-nya sudah besar
Hanya bisa pasang satu handler per event

Tip: Kalau Anda menulis onclick di HTML, pertimbangkan untuk refactor ke addEventListener.

Menggunakan Property DOM

Cara kedua — akses element lewat JavaScript lalu set property event-nya:

let tombol = document.querySelector("#tombolku");

tombol.onclick = function () {
  console.log("Tombol diklik!");
};

Lebih baik dari inline, tapi masih ada kelemahan: kalau Anda set onclick dua kali, yang pertama tertimpa. Tidak ada cara pasang dua handler sekaligus.

addEventListener (Rekomendasi) ⭐

Ini cara yang paling fleksibel dan paling sering dipakai:

let tombol = document.querySelector("#tombolku");

tombol.addEventListener("click", function () {
  console.log("Tombol diklik!");
});

// Bisa pasang dua handler sekaligus!
tombol.addEventListener("click", function () {
  console.log("Handler kedua juga jalan!");
});

Dengan addEventListener, Anda bisa:

Pasang lebih dari satu handler untuk event yang sama
Hapus handler dengan removeEventListener saat tidak diperlukan
Kontrol options seperti capture dan once

3. Event Object

Setiap kali event terjadi, JavaScript otomatis membuat event object yang berisi informasi tentang event tersebut. Anda tinggal menerimanya sebagai parameter:

let tombol = document.querySelector("#tombolku");

tombol.addEventListener("click", function (event) {
  console.log("Event type:", event.type);       // "click"
  console.log("Target element:", event.target);  // <button>
  console.log("Mouse position:", event.clientX, event.clientY);
});

Properti Penting di Event Object

Properti	Fungsi
`event.type`	Jenis event (click, input, submit, dll)
`event.target`	Element yang memicu event
`event.currentTarget`	Element yang handler-nya dipasang
`event.preventDefault()`	Mencegah aksi default browser
`event.stopPropagation()`	Mencegah event “naik” ke parent
`event.clientX/clientY`	Posisi mouse relatif terhadap viewport
`event.key`	Tombol keyboard yang ditekan

event.preventDefault() sangat penting — misalnya untuk mencegah form submit yang akan reload halaman:

let form = document.querySelector("#formLogin");

form.addEventListener("submit", function (event) {
  event.preventDefault(); // Halaman TIDAK akan reload
  console.log("Form disubmit!");
});

4. Jenis Event yang Sering Dipakai

click — Klik Tombol atau Element

Event paling dasar. Triggered ketika user mengklik element.

let tombol = document.querySelector("#tombolHapus");

tombol.addEventListener("click", function () {
  if (confirm("Yakin ingin hapus?")) {
    console.log("Dihapus!");
  }
});

dblclick — Klik Ganda

let gambar = document.querySelector("#fotoProfil");

gambar.addEventListener("dblclick", function () {
  gambar.classList.toggle("zoom-in");
});

mouseenter dan mouseleave — Hover

Ketika cursor masuk atau keluar dari element:

let kartu = document.querySelector(".kartu");

kartu.addEventListener("mouseenter", function () {
  kartu.style.transform = "scale(1.05)";
  kartu.style.boxShadow = "0 4px 15px rgba(0,0,0,0.2)";
});

kartu.addEventListener("mouseleave", function () {
  kartu.style.transform = "scale(1)";
  kartu.style.boxShadow = "none";
});

Efek ini sering dipakai untuk card hover di website modern.

input — Real-time Input Tracking

Triggered setiap kali nilai input berubah. Cocok untuk live search atau character counter:

let inputSearch = document.querySelector("#searchInput");
let output = document.querySelector("#hasil");

inputSearch.addEventListener("input", function (event) {
  let query = event.target.value;
  output.textContent = `Anda mengetik: "${query}" (${query.length} karakter)`;
});

keydown dan keyup — Keyboard

Ketika user menekan atau melepas tombol keyboard:

document.addEventListener("keydown", function (event) {
  console.log(`Tombol ditekan: ${event.key}`);
  console.log(`Kode: ${event.code}`);

  // Shortcut: Ctrl + S untuk save
  if (event.ctrlKey && event.key === "s") {
    event.preventDefault();
    console.log("File disimpan!");
  }
});

event.key memberikan nama tombol yang mudah dibaca (seperti "Enter", "Escape", "a"). Sedangkan event.code memberikan kode fisik tombol.

submit — Form Submission

let form = document.querySelector("#formRegistrasi");

form.addEventListener("submit", function (event) {
  event.preventDefault(); // Cegah reload halaman

  let nama = document.querySelector("#nama").value;
  let email = document.querySelector("#email").value;

  if (!nama || !email) {
    alert("Semua field harus diisi!");
    return;
  }

  console.log(`Registrasi: ${nama} (${email})`);
});

change — Nilai Berubah

Berbeda dari input, change hanya trigger ketika element kehilangan fokus dan nilainya berubah:

let select = document.querySelector("#bahasa");

select.addEventListener("change", function (event) {
  console.log(`Bahasa dipilih: ${event.target.value}`);
});

5. Event Propagation: Bubbling & Capturing

Ketika event terjadi pada element, event itu tidak hanya menjangkau element itu sendiri — dia juga bisa menjalar ke element parent. Proses ini disebut event propagation.

Ada dua fase:

Bubbling (Default)

Event dimulai dari target, lalu “naik” ke parent secara berurutan:

<div id="outer">
  <div id="inner">
    <button id="tombol">Klik</button>
  </div>
</div>

<script>
  document.querySelector("#outer").addEventListener("click", function () {
    console.log("Outer diklik");
  });

  document.querySelector("#inner").addEventListener("click", function () {
    console.log("Inner diklik");
  });

  document.querySelector("#tombol").addEventListener("click", function () {
    console.log("Tombol diklik");
  });
</script>

Ketika tombol diklik, output-nya:

Tombol diklik
Inner diklik
Outer diklik

Event “bubbles” naik dari tombol ke inner ke outer.

Capturing

Anda bisa membalik urutannya dengan opsi capture: true:

document.querySelector("#outer").addEventListener(
  "click",
  function () {
    console.log("Outer (capturing)");
  },
  true // <-- fase capturing
);

Menghentikan Propagation

Gunakan event.stopPropagation() kalau Anda tidak mau event naik ke parent:

document.querySelector("#inner").addEventListener("click", function (event) {
  event.stopPropagation();
  console.log("Inner diklik, tapi outer TIDAK diklik");
});

6. One-Time Event Handler

Kalau Anda hanya mau handler jalan sekali saja, gunakan opsi once: true:

let tombol = document.querySelector("#tombolSubscribe");

tombol.addEventListener(
  "click",
  function () {
    console.log("Terima kasih sudah subscribe!");
    tombol.disabled = true;
  },
  { once: true }
);

Setelah diklik sekali, handler otomatis dihapus. Tidak perlu manual removeEventListener.

7. Event Delegation

Daripada pasang event handler ke setiap element (misal 100 item list), lebih efisien pakai event delegation: pasang handler di parent, lalu cek event.target di dalamnya:

// ❌ Lambat: pasang handler ke 100 item
let items = document.querySelectorAll(".list-item");
items.forEach(function (item) {
  item.addEventListener("click", function () {
    console.log("Item diklik:", item.textContent);
  });
});

// ✅ Cepat: satu handler di parent
let list = document.querySelector("#todoList");

list.addEventListener("click", function (event) {
  if (event.target.classList.contains("list-item")) {
    console.log("Item diklik:", event.target.textContent);
  }
});

Event delegation juga lebih kuat karena handler tetap bekerja untuk item yang ditambahkan secara dinamis setelah halaman dimuat.

8. Recap

Konsep	Penjelasan Singkat
Event	Sesuatu yang terjadi pada element (klik, input, dll)
`addEventListener`	Cara paling fleksibel untuk pasang event handler
Event object	Objek berisi info tentang event (type, target, posisi mouse)
`preventDefault()`	Mencegah aksi default browser (reload, navigasi)
`click`	Triggered saat element diklik
`input`	Triggered saat nilai input berubah
`submit`	Triggered saat form disubmit
`keydown` / `keyup`	Triggered saat tombol keyboard ditekan/dilepas
`mouseenter` / `mouseleave`	Triggered saat cursor masuk/keluar element
Bubbling	Event menjalar dari target ke parent
`stopPropagation()`	Menghentikan event menjalar ke parent
Event delegation	Pasang handler di parent untuk efisiensi
`once: true`	Handler hanya jalan sekali

Penutup

Dan itu dia artikel terakhir dari seri JavaScript kita! 🎉

Dari pengenalan JavaScript, variables, operators, control flow, functions, arrays & objects, DOM manipulation, sampai event handling — Anda sudah punya fondasi yang solid untuk membangun website interaktif.

Yang perlu diingat:

Selalu pakai addEventListener daripada inline handler
Pahami event object — dia adalah kunci untuk mengontrol respons aplikasi
Gunakan event.preventDefault() untuk mencegah aksi default yang tidak diinginkan
Event delegation lebih efisien untuk banyak element
stopPropagation() bila Anda tidak mau event menjalar ke parent

Sekarang giliran Anda praktek! Buatlah mini project — misalnya todo list sederhana atau calculator — untuk memperkuat pemahaman tentang DOM manipulation dan event handling. Dua konsep ini adalah hati dari setiap web interaktif.

Selamat menyelesaikan seri JavaScript! 💪

🎉 Seri JavaScript Selesai!

Anda telah menyelesaikan 8 artikel tentang JavaScript — dari dasar sampai event handling. Fondasi ini cukup untuk membangun website interaktif. Selanjutnya, tinggal praktek dan eksplorasi!