Event JavaScript adalah sinyal bahwa sesuatu terjadi di halaman web, pengguna mengklik tombol, mengetik di kolom input, menggerakkan mouse, atau menekan tombol keyboard. JavaScript “mendengarkan” sinyal-sinyal ini lalu menjalankan fungsi sebagai respons. Tanpa event, sebuah halaman hanyalah tampilan diam; dengan event, halaman jadi hidup dan bisa merespons setiap aksi penggunanya. Inilah jantung dari interaktivitas web.

Di panduan ini kamu akan belajar konsep event dari nol: apa itu event, cara mendengarkannya dengan addEventListener, apa isi event object, jenis-jenis event yang paling sering dipakai, sampai perbedaan antara addEventListener dan atribut onclick yang sering bikin bingung. Semua dijelaskan dengan bahasa sederhana dan contoh kode yang bisa langsung kamu praktikkan.

Apa Itu Event di JavaScript?

Event adalah “kejadian” yang bisa dideteksi oleh browser dan direspons oleh kode JavaScript. Bayangkan browser seperti seorang pelayan yang terus mengawasi halaman: setiap kali kamu mengklik, mengetik, menggeser layar, atau memuat gambar, pelayan itu berteriak “Ada klik!”, “Ada ketikan!”, “Halaman selesai dimuat!”. Teriakan itulah yang disebut event.

Tugas kamu sebagai programmer adalah memasang “pendengar” (listener) untuk event tertentu, lalu memberi tahu apa yang harus dilakukan ketika event itu terjadi. Misalnya: “kalau tombol ini diklik, tampilkan pesan”. Fungsi yang dijalankan sebagai respons inilah yang disebut event handler atau callback.

Beberapa event yang paling sering kamu temui sehari-hari:

click, pengguna mengklik sebuah elemen (tombol, link, gambar).
input, nilai sebuah <input> atau <textarea> berubah saat diketik.
keydown, pengguna menekan sebuah tombol keyboard.
submit, sebuah form dikirim.
mouseenter / mouseleave, mouse masuk atau keluar dari area elemen.
load, halaman atau sebuah resource selesai dimuat.

Cara Mendengarkan Event dengan addEventListener

Cara modern dan paling direkomendasikan untuk mendengarkan event adalah method addEventListener. Method ini dipanggil pada sebuah elemen DOM, dan menerima dua argumen utama: nama event dan fungsi yang akan dijalankan.

// 1. Ambil elemen dari halaman lewat DOM
const tombol = document.getElementById("tombol-simpan")

// 2. Pasang pendengar untuk event "click"
tombol.addEventListener("click", function () {
  alert("Tombol disimpan diklik!")
})

Perhatikan polanya: elemen.addEventListener("namaEvent", fungsi). Argumen pertama adalah nama event dalam bentuk string (tanpa awalan on), dan argumen kedua adalah fungsi yang akan dieksekusi setiap kali event itu terjadi. Karena kita mengambil elemen lewat DOM dulu, penting untuk memahami cara kerja DOM di JavaScript supaya kamu tahu elemen mana yang sedang kamu dengarkan.

Di kode modern, fungsi handler biasanya ditulis dengan arrow function supaya lebih ringkas:

const tombol = document.getElementById("tombol-simpan")

tombol.addEventListener("click", () => {
  console.log("Diklik!")
})

Event Object: Informasi tentang Kejadian

Setiap kali sebuah event terjadi, browser secara otomatis mengirim sebuah event object ke fungsi handler kamu. Object ini berisi semua detail tentang apa yang baru saja terjadi, elemen mana yang dipicu, tombol keyboard apa yang ditekan, posisi mouse, dan banyak lagi. Kamu tinggal menerimanya sebagai parameter (biasa diberi nama event, e, atau evt).

const input = document.getElementById("nama")

input.addEventListener("input", (event) => {
  // event.target = elemen yang memicu event
  console.log("Isi input sekarang:", event.target.value)

  // event.type = nama event-nya
  console.log("Jenis event:", event.type)  // "input"
})

Dua properti event object yang paling sering kamu pakai:

event.target, elemen DOM yang memicu event. Dari sini kamu bisa membaca event.target.value (isi input), event.target.id, dan properti lainnya.
event.type, nama event dalam bentuk string, misalnya "click" atau "keydown".

Untuk event keyboard, ada properti tambahan yang berguna:

document.addEventListener("keydown", (event) => {
  console.log("Tombol ditekan:", event.key)  // misal "Enter", "a", "ArrowUp"
})

Coba Sendiri: Lihat Event Terjadi Secara Langsung

Teori saja belum cukup, cara tercepat memahami event adalah dengan melihatnya terjadi. Di playground di bawah ini, coba klik tombol, ketik di kolom input, dan arahkan mouse ke kotak. Perhatikan panel log di sebelah kanan: setiap interaksi memicu satu event, lengkap dengan event.type dan event.target-nya.

Coba Sendiri

Picu event di sini

Arahkan mouse ke sini (mouseenter)

Event log (terbaru di atas)

Belum ada event. Coba interaksi di kiri.

Setiap baris log dibuat oleh addEventListener yang membaca event.type dan event.target.

Perhatikan bagaimana mengetik satu huruf memicu dua event sekaligus: keydown (saat tombol ditekan) dan input (saat nilai berubah). Ini normal, satu aksi pengguna sering memicu beberapa event berbeda, dan kamu bebas memilih mana yang mau kamu dengarkan.

Perbedaan addEventListener dan onclick

Ini pertanyaan yang hampir selalu muncul: kenapa pakai addEventListener kalau ada cara yang lebih pendek seperti atribut onclick? Ada tiga cara memasang event handler, dan penting paham bedanya karena inilah “money question” yang membedakan kode pemula dan kode profesional.

Cara pertama, inline HTML, menaruh kode langsung di atribut HTML:

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

Cara kedua, properti onclick di JavaScript:

const tombol = document.getElementById("tombol")
tombol.onclick = () => alert("Halo!")

Cara ketiga, addEventListener (yang direkomendasikan):

const tombol = document.getElementById("tombol")
tombol.addEventListener("click", () => alert("Halo!"))

Berikut perbandingan ketiganya:

Aspek	Inline `onclick` HTML	Properti `onclick` JS	`addEventListener`
Pemisahan HTML & JS	❌ Tercampur	✅ Terpisah	✅ Terpisah
Bisa pasang banyak handler	❌ Tidak	❌ Tidak (saling menimpa)	✅ Ya
Kontrol opsi (capture, once)	❌ Tidak	❌ Tidak	✅ Ya
Bisa dilepas kembali	❌ Sulit	⚠️ Timpa dengan `null`	✅ `removeEventListener`

Perbedaan paling penting ada di baris kedua. Dengan onclick, memasang handler baru akan menimpa handler lama:

tombol.onclick = () => console.log("Pertama")
tombol.onclick = () => console.log("Kedua")
// Hanya "Kedua" yang jalan, yang pertama tertimpa!

Sedangkan dengan addEventListener, kamu bisa memasang beberapa handler untuk event yang sama, dan semuanya akan dijalankan:

tombol.addEventListener("click", () => console.log("Pertama"))
tombol.addEventListener("click", () => console.log("Kedua"))
// Kedua-duanya jalan!

preventDefault: Menghentikan Perilaku Bawaan

Beberapa elemen HTML punya perilaku bawaan (default) saat event terjadi. Contoh klasik: form yang di-submit akan me-reload halaman, dan link yang diklik akan berpindah halaman. Sering kali kamu ingin mencegah perilaku ini dan menanganinya sendiri dengan JavaScript. Di sinilah event.preventDefault() berperan.

const form = document.getElementById("form-login")

form.addEventListener("submit", (event) => {
  event.preventDefault()  // cegah halaman reload

  const email = document.getElementById("email").value
  console.log("Kirim data tanpa reload:", email)
  // ...proses data dengan JavaScript
})

Tanpa event.preventDefault(), form akan me-reload halaman dan kode JavaScript-mu tidak sempat berjalan. Pola ini adalah dasar dari hampir semua form modern yang mengirim data lewat JavaScript (misalnya dengan fetch) tanpa refresh.

Event Bubbling dan Delegation (Sekilas)

Ketika kamu mengklik sebuah tombol yang berada di dalam sebuah <div>, event click-nya tidak berhenti di tombol saja, ia “menggelembung” (bubble) ke atas, ke elemen induknya, terus sampai ke document. Konsep ini disebut event bubbling.

Bubbling memungkinkan trik yang sangat berguna bernama event delegation: alih-alih memasang listener di setiap tombol, kamu cukup memasang satu listener di elemen induk, lalu memeriksa event.target untuk tahu elemen mana yang sebenarnya diklik.

const daftar = document.getElementById("daftar-menu")

// Satu listener untuk semua item di dalam daftar
daftar.addEventListener("click", (event) => {
  if (event.target.tagName === "LI") {
    console.log("Item diklik:", event.target.textContent)
  }
})

Contoh Nyata: Tombol Hitung Sederhana

Mari gabungkan semua konsep menjadi satu contoh mini yang lengkap, sebuah penghitung yang bertambah setiap kali tombol diklik. HTML-nya:

<button id="tombol-tambah">Tambah</button>
<p id="hasil">Hitungan: 0</p>

JavaScript yang menghidupkannya:

// Ambil elemen dari DOM
const tombol = document.getElementById("tombol-tambah")
const hasil = document.getElementById("hasil")

// Simpan state di sebuah variabel
let hitungan = 0

// Dengarkan event click, lalu perbarui tampilan
tombol.addEventListener("click", () => {
  hitungan = hitungan + 1
  hasil.textContent = `Hitungan: ${hitungan}`
})

Alurnya: kita ambil referensi elemen lewat DOM, simpan data di variabel hitungan, lalu pasang listener yang mengubah data dan memperbarui tampilan setiap kali tombol diklik. Pola “dengarkan event → ubah data → perbarui tampilan” ini adalah fondasi cara kerja semua aplikasi web interaktif, termasuk yang dibangun dengan framework seperti React.

Kalau kamu ingin berlatih event secara langsung di browser dengan latihan bertahap, materi Event JavaScript di Hyper Sheets menjelaskan konsep ini lengkap dengan editor kode interaktif yang bisa langsung kamu kerjakan tanpa setup apa pun.

Cek Pemahaman

Apa keunggulan utama addEventListener dibanding properti onclick?

FAQ Seputar Event JavaScript

Apa itu event dalam JavaScript?

Event dalam JavaScript adalah sinyal bahwa sesuatu terjadi di halaman web, seperti klik tombol, ketikan keyboard, atau pergerakan mouse. JavaScript bisa “mendengarkan” event ini menggunakan addEventListener lalu menjalankan sebuah fungsi sebagai respons. Event adalah cara utama membuat halaman web menjadi interaktif dan merespons aksi pengguna.

Apa itu addEventListener?

addEventListener adalah method JavaScript yang dipakai untuk mendengarkan sebuah event pada elemen DOM. Ia menerima dua argumen utama: nama event (misalnya "click") dan fungsi yang akan dijalankan saat event itu terjadi. Ini adalah cara modern dan direkomendasikan untuk menangani event, menggantikan atribut onclick di HTML.

Apa perbedaan onclick dan addEventListener?

Perbedaan utamanya: onclick hanya bisa menampung satu handler (handler baru menimpa yang lama), sedangkan addEventListener bisa memasang banyak handler sekaligus untuk event yang sama. addEventListener juga mendukung opsi tambahan seperti once dan capture, serta bisa dilepas kembali dengan removeEventListener. Untuk proyek nyata, gunakan addEventListener.

Apa itu event.target?

event.target adalah properti dari event object yang menunjuk ke elemen DOM yang memicu event tersebut. Misalnya saat kamu mengklik sebuah tombol, event.target adalah tombol itu sendiri. Kamu bisa membaca datanya, misalnya event.target.value untuk isi input, atau event.target.id untuk mengetahui id elemennya.

Apa fungsi event.preventDefault()?

event.preventDefault() menghentikan perilaku bawaan sebuah elemen saat event terjadi. Contoh paling umum adalah mencegah form me-reload halaman saat di-submit, atau mencegah link berpindah halaman saat diklik. Ini memungkinkan kamu menangani aksi tersebut sepenuhnya dengan JavaScript, misalnya mengirim data lewat fetch tanpa refresh.

Kenapa event handler saya tidak jalan?

Penyebab paling umum adalah script berjalan sebelum elemen HTML-nya ada di halaman, sehingga getElementById menghasilkan null. Solusinya: taruh <script> tepat sebelum </body>, atau bungkus kode di dalam event DOMContentLoaded. Penyebab lain adalah salah menulis nama event (misalnya "onclick" padahal seharusnya "click") atau tak sengaja memanggil fungsi dengan tanda kurung.

Kesimpulan

Event adalah jembatan antara aksi pengguna dan respons aplikasimu. Dengan menguasai addEventListener, memahami isi event object seperti event.target dan event.type, serta tahu kapan memakai preventDefault, kamu sudah punya semua yang dibutuhkan untuk membangun antarmuka web yang benar-benar interaktif. Konsep ini adalah fondasi yang akan terus kamu pakai, bahkan saat nanti belajar framework modern, semuanya tetap berakar pada ide sederhana ini: dengarkan event, lalu respons.

Langkah berikutnya, perkuat dulu dasar JavaScript dari nol kalau ada konsep di sini yang masih terasa asing, lalu latih event secara interaktif lewat materi Event JavaScript di Hyper Sheets untuk mengunci pemahamanmu dengan praktik langsung.