JavaScript Extended #20: Event Handling di JavaScript

• 05/29/2025
• ariq fadhil
• 6

1. Apa itu Event?

Event adalah aksi atau kejadian yang terjadi di halaman web, baik dilakukan oleh user maupun browser. Contohnya adalah klik tombol, mengetik di input, submit form, scroll halaman, atau mouse bergerak.

2. addEventListener()

Cara modern untuk menangani event adalah menggunakan addEventListener().

const button = document.querySelector("button");

button.addEventListener("click", () => {
  console.log("Button diklik");
});

3. Event Object

Setiap event membawa object yang berisi informasi detail mengenai event tersebut.

button.addEventListener("click", (event) => {
  console.log(event.target);
  console.log(event.type);
});

4. Input Event

Event juga sering digunakan pada form input.

const input = document.querySelector("input");

input.addEventListener("input", (event) => {
  console.log("Nilai sekarang:", event.target.value);
});

5. Submit Event

Pada form, kita sering mencegah reload halaman default dengan preventDefault().

const form = document.querySelector("form");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  console.log("Form disubmit tanpa reload");
});

6. Keyboard Event

document.addEventListener("keydown", (event) => {
  console.log("Tombol ditekan:", event.key);
});

7. Mouse Event

• click
• dblclick
• mouseover
• mouseout
• mousemove

8. Ringkasan

• Event memungkinkan halaman web merespons aksi user
• addEventListener() adalah cara utama menangani event
• event.target menunjukkan elemen yang memicu event
• preventDefault() berguna untuk mengontrol perilaku bawaan browser

Di part berikutnya, kita akan membahas event bubbling, capturing, dan delegation.