Event Dasar

Web yang merespons

Event adalah "kejadian" di halaman: klik tombol, ketikan keyboard, gerakan mouse, halaman selesai dimuat. Program yang merespons event disebut event-driven, dan ini jantung dari interaktivitas web.

Cara paling sederhana: atribut HTML

<button onclick="sapa()">Klik aku</button>
<script>
  function sapa() {
    alert("Halo!");
  }
</script>

Cara ini mudah tapi tidak disarankan untuk kode serius: HTML dan JavaScript tercampur, dan satu elemen hanya bisa punya satu handler.

Cara lebih baik: properti DOM

let tombol = document.querySelector("button");
tombol.onclick = function() {
  alert("Halo!");
};

Sedikit lebih rapi, tapi masih satu handler per event. Cara modern dan paling fleksibel adalah addEventListener yang dibahas di modul berikutnya.

Jenis-jenis event umum

// mouse
// click, dblclick, mouseover, mouseout

// keyboard
// keydown, keyup, keypress

// form
// submit, input, change, focus, blur

// dokumen
// DOMContentLoaded, load, resize, scroll

Contoh keyboard:

document.addEventListener("keydown", () => {
  console.log("Tombol keyboard ditekan!");
});

Event load

window.addEventListener("load", () => {
  console.log("Semua resource selesai dimuat");
});

document.addEventListener("DOMContentLoaded", () => {
  console.log("HTML selesai di-parse");
});

DOMContentLoaded jalan lebih awal (cukup HTML selesai), sedangkan load menunggu gambar dan resource lain. Untuk manipulasi DOM, DOMContentLoaded sudah cukup.

Catatan teknis: Nama event di addEventListener tanpa awalan "on": "click" bukan "onclick", "keydown" bukan "onkeydown". Awalan "on" hanya dipakai di atribut HTML dan properti DOM.

Event yang wajib dikenal

Hafalkan kelompok ini, mereka mencakup 90% kebutuhan:

// klik dan mouse
tombol.addEventListener("click", aksi);
tombol.addEventListener("dblclick", aksi); // klik ganda

// keyboard: e.key berisi tombolnya
input.addEventListener("keydown", (e) => {
  if (e.key === "Enter") console.log("Enter ditekan!");
});

// form
form.addEventListener("submit", aksi);
input.addEventListener("input", aksi); // tiap perubahan

// window
window.addEventListener("resize", aksi);
window.addEventListener("scroll", aksi);

Untuk keyboard, selalu pakai e.key ("Enter", "Escape", "a") bukan kode angka lama. Untuk scroll dan resize yang bisa jalan ratusan kali per detik, pertimbangkan debounce agar handler tidak membebani browser.

Event dan fungsi anonim vs bernama

Handler bisa ditulis inline atau sebagai fungsi bernama:

// anonim: cepat untuk aksi sekali pakai
tombol.addEventListener("click", () => console.log("klik!"));

// bernama: bisa dipakai ulang dan dilepas
function handleKlik() { console.log("klik!"); }
tombol.addEventListener("click", handleKlik);
tombol.removeEventListener("click", handleKlik);

Untuk prototipe cepat, fungsi anonim cukup. Untuk kode yang dirawat lama, fungsi bernama lebih mudah dites, di-debug (muncul di stack trace), dan dilepas saat tidak dibutuhkan.

Kesimpulan

Event = kejadian yang bisa direspons. Pahami daftar event umum dan perbedaan load vs DOMContentLoaded. Selanjutnya: cara memasang listener yang benar dengan addEventListener.