Event: addEventListener

Klik, mouseover, keyboard — interaktivitas dimulai di sini.

Pahami konsepnya

Event adalah jantung interaktivitas web: klik, ketik, scroll, hover — semuanya event. addEventListener("eventType", handler) mendaftarkan fungsi yang berjalan saat event terjadi: button.addEventListener("click", () => alert("diklik!")).

Event yang sering: click, dblclick, mouseover, mouseout, keydown (saat tombol ditekan), keyup (saat dilepas), input (saat nilai form berubah), change (saat selesai berubah), submit (form), scroll, focus, blur.

Handler menerima event object berisi detail: e.target (elemen yang memicu), e.key (tombol keyboard yang ditekan), e.clientX/clientY (posisi mouse), e.preventDefault() (mencegah perilaku bawaan seperti submit form).

Coba contoh kode

<!doctype html>
<html>
<body>
  <button id="btn">Klik aku</button>
  <input id="nama" placeholder="Ketik nama...">
  <p id="hasil"></p>

  <script>
    const btn = document.getElementById("btn");
    const input = document.getElementById("nama");
    const hasil = document.getElementById("hasil");

    btn.addEventListener("click", () => {
      hasil.textContent = `Halo, ${input.value || "Tamu"}!`;
    });

    input.addEventListener("input", (e) => {
      console.log("mengetik:", e.target.value);
    });

    document.addEventListener("keydown", (e) => {
      if (e.key === "Enter") btn.click();
    });
  </script>
</body>
</html>

Klik tombol membaca input.value dan menampilkan sapaan. Event "input" menyala pada SETIAP ketikan. keydown Enter memicu btn.click() — keyboard shortcut sederhana.

Latihan singkat

Uji: buat eventBus sederhana — on("klik", fn) lalu emit("klik") menjalankan fn.