Coba bayangin halaman web tanpa interaksi: gak bisa diklik, gak bisa di-scroll, gak bisa diketik. Itu web tanpa events. Event = aksi yang terjadi di halaman — klik mouse, tekan keyboard, scroll, resize window. JavaScript bisa "denger" event-event ini lewat event listener, terus reaksi sesuai logika kamu. Tanpa event, JavaScript cuma jalanin kode satu kali pas halaman load. Dengan event, JavaScript jadi responsive — bereaksi sesuai apa yang user lakuin.
🤔 Pola event-driven. Konsep ini namanya "event-driven programming" — bahasa modern (JavaScript, Python async, Swift) semuanya pake. Beda dari "imperative" yang tulis perintah berurutan, event-driven nungguin sinyal terus reaksi. Cocok banget buat UI yang sifatnya menunggu interaksi user.
const tombol = document.querySelector("button");
tombol.addEventListener("click", function() {
console.log("Tombol diklik!");
});
Event yang sering digunakan:
click— klik mouseinput— ketik di input fieldsubmit— kirim formmouseover/mouseout— hoverkeydown/keyup— tekan keyboard
🎭 Analogi sehari-hari
Event = bel pintu rumah. JavaScript = kamu yang lagi rebahan di kamar. addEventListener = "kalau bel bunyi, aku lari ke pintu." Kamu tidak nungguin di depan pintu terus — JS tidak block, dia tunggu sambil ngerjain hal lain.
Browser yang panggil callback kamu pas event terjadi.
⚠️ Jebakan yang sering ditemui
- Lupa
removeEventListener= MEMORY LEAK. Listener nempel di element. Element dihapus DOM tapi listener masih hidup = bug + leak. - Anonymous callback tidak bisa di-remove.
addEventListener("click", () => {...})— referensi callback tidak ada,removeEventListenerbutuh referensi yang sama. Simpan ke variabel. event.preventDefault()perlu untuk form submit (cegah reload),<a>link (cegah navigasi), drag-drop (browser default behavior).- Event bubbling — klik di
<button>juga trigger click di parent<div>,<body>, dst. Pakaievent.stopPropagation()untuk hentikan, atauevent.targetvsevent.currentTargetuntuk filter. - Multiple listener untuk event sama semua jalan, urutan sesuai urutan add. Tidak override.
- Inline
onclick="..."sudah outdated — pakaiaddEventListener. Inline cuma boleh satu handler + susah maintain. - Passive listener untuk scroll/touch —
{passive: true}bikin scroll smooth, browser tidak nunggu callback.
🎯
addEventListenervsonclickvs inlineonclick=— pilih yang mana?
- Modern best practice (production) →
el.addEventListener("click", fn)(multiple handlers, removable)- Quick prototype →
el.onclick = fn(cuma satu handler, terakhir menang)- Inline HTML (
<button onclick="doStuff()">) → AVOID (HTML+JS tercampur, susah refactor, CSP unfriendly)- React/Vue/Svelte →
<button onClick={fn}>(framework handle binding)Patokan: kalau perlu PASS multiple handlers atau remove later →
addEventListener. Kalau cuma satu handler quick →onclickproperty. JANGAN inlineonclick=""di HTML production — anti-pattern lama.
TL;DR: Events = aksi yang terjadi (klik, ketik, scroll, resize). addEventListener("click", fn) modern best practice (multiple handlers + removable). Event object kasih info: event.target (yang triggered), event.preventDefault() (block default browser action), event.stopPropagation() (stop bubbling). Common events: click, input, submit, keydown, scroll. Pakai {passive: true} untuk scroll/touch (smoother). Hindari inline onclick="" (CSP unfriendly).
