Sign in Subscribe
Javascript

Memahami JavaScript Event dan Implementasinya

Memahami JavaScript Event dan Implementasinya
Photo by Glenn Carstens-Peters / Unsplash

Kenalan Dulu Sama JavaScript Event

Kalau kamu sering berinteraksi dengan website, pasti sadar kalau ada banyak hal yang bisa dilakukan: klik tombol, masukkan teks ke dalam form, geser halaman, dan sebagainya. Nah, semua itu terjadi berkat JavaScript Event.

Event dalam JavaScript adalah sesuatu yang terjadi pada halaman web yang bisa kita tangkap dan tangani menggunakan JavaScript. Dengan event, kita bisa membuat website jadi lebih interaktif dan dinamis.

Jenis-Jenis Event dalam JavaScript

Ada banyak jenis event dalam JavaScript, dan kita bisa mengelompokkannya berdasarkan cara pengguna berinteraksi dengan elemen web. Berikut beberapa event yang paling sering digunakan:

1. Event Mouse (Klik, Hover, Double Klik)

Event yang terjadi saat pengguna menggunakan mouse:

  • click → Ketika elemen diklik.
  • dblclick → Ketika elemen diklik dua kali.
  • mouseover → Saat kursor masuk ke dalam elemen.
  • mouseout → Saat kursor keluar dari elemen.

Contoh:

document.getElementById("tombol").addEventListener("click", function() {
    alert("Tombol diklik!");
});

2. Event Keyboard (Menekan Tombol di Keyboard)

Event ini terjadi ketika pengguna mengetik sesuatu di keyboard:

  • keydown → Saat tombol ditekan.
  • keyup → Saat tombol dilepas.
  • keypress → Saat tombol ditekan (deprecated, sebaiknya gunakan keydown).

Contoh:

document.addEventListener("keydown", function(event) {
    console.log(`Tombol yang ditekan: ${event.key}`);
});

3. Event Form (Input, Submit, Fokus)

Event yang terkait dengan form:

  • focus → Saat elemen input mendapatkan fokus.
  • blur → Saat elemen input kehilangan fokus.
  • change → Saat isi elemen berubah.
  • submit → Saat form dikirim.

Contoh:

document.getElementById("input").addEventListener("change", function() {
    console.log("Input berubah!");
});

4. Event Window (Load, Scroll, Resize)

Event yang terjadi pada jendela browser:

  • load → Saat halaman selesai dimuat.
  • scroll → Saat pengguna menggulir halaman.
  • resize → Saat ukuran jendela browser berubah.

Contoh:

window.addEventListener("scroll", function() {
    console.log("Halaman sedang digulir!");
});

Cara Menangani Event di JavaScript

Untuk menangani event dalam JavaScript, kita punya beberapa metode:

1. Inline Event Handler (Cara Lama, Kurang Direkomendasikan)

Menambahkan event langsung dalam atribut HTML.

<button onclick="alert('Tombol diklik!')">Klik Saya</button>

2. Event Handler dengan JavaScript

Menambahkan event secara langsung dalam JavaScript.

const tombol = document.getElementById("tombol");
tombol.onclick = function() {
    alert("Tombol diklik!");
};

3. Event Listener (Cara Modern & Fleksibel)

Menggunakan addEventListener() untuk menangani event.

document.getElementById("tombol").addEventListener("click", function() {
    alert("Tombol diklik!");
});

Keuntungan addEventListener():

✅ Bisa menambahkan lebih dari satu event pada elemen yang sama.

✅ Memisahkan struktur HTML dan JavaScript dengan baik.

✅ Bisa menghapus event menggunakan removeEventListener().

Contoh Implementasi Event dalam Proyek

Biar makin paham, yuk kita coba bikin fitur sederhana menggunakan event di JavaScript!

1. Mengubah Warna Background Saat Klik Tombol

const tombol = document.getElementById("tombol");
tombol.addEventListener("click", function() {
    document.body.style.backgroundColor = "lightblue";
});

2. Menampilkan Jumlah Karakter yang Diketik di Input

const input = document.getElementById("input");
const counter = document.getElementById("counter");

input.addEventListener("input", function() {
    counter.textContent = `Jumlah karakter: ${input.value.length}`;
});

3. Menampilkan Pesan Saat Form Dikirim

document.getElementById("form").addEventListener("submit", function(event) {
    event.preventDefault(); // Mencegah halaman reload
    alert("Form berhasil dikirim!");
});

Kesimpulan

  • JavaScript Event memungkinkan kita menangani interaksi pengguna dengan halaman web.
  • Ada banyak jenis event seperti mouse, keyboard, form, dan window event.
  • Cara menangani event bisa menggunakan inline handler, event handler di JavaScript, atau addEventListener().
  • Event sering digunakan untuk meningkatkan interaktivitas website seperti menangani input form, klik tombol, dan perubahan halaman.

Dengan memahami event dan cara menggunakannya, kamu bisa bikin website yang lebih dinamis, responsif, dan interaktif. Yuk, coba praktekkan langsung di proyekmu!

Read next