Event Types: Click, Mouseenter, Mouseleave, Keydown, Keyup. gambar

Mengenal berbagai jenis Event adalah langkah penting untuk menciptakan pengalaman pengguna (User Experience) yang interaktif. Jika addEventListener adalah telinganya, maka Event Types adalah suara spesifik yang sedang kita tunggu.

Berikut adalah pembahasan mendalam mengenai 5 tipe event paling esensial dalam JavaScript.

1. Event Mouse (Mouse Events)

Event ini dipicu oleh interaksi pengguna menggunakan kursor atau touchpad.

A. Click

Dipicu ketika pengguna menekan dan melepaskan tombol mouse pada sebuah elemen.

• Kegunaan: Tombol kirim, toggle menu, membuka link.

const btn = document.querySelector('.btn');
btn.addEventListener('click', () => { alert('Tombol berhasil diklik!');
});

B. Mouseenter

Dipicu saat kursor mouse memasuki area elemen tersebut. Event ini tidak "merembet" (bubble) ke elemen anak.

• Kegunaan: Menampilkan tooltip, memperbesar gambar saat disorot (hover effect).

C. Mouseleave

Dipicu saat kursor mouse meninggalkan area elemen tersebut.

• Kegunaan: Menyembunyikan kembali menu atau mengembalikan ukuran gambar ke semula.

Contoh Gabungan Mouseenter & Mouseleave:

const box = document.querySelector('.box'); box.addEventListener('mouseenter', () => { box.style.backgroundColor = 'yellow';
}); box.addEventListener('mouseleave', () => { box.style.backgroundColor = 'white';
});

2. Event Keyboard (Keyboard Events)

Event ini dipicu saat pengguna berinteraksi dengan papan ketik. Biasanya dipasang pada elemen input, textarea, atau objek window.

A. Keydown

Dipicu saat tombol pada keyboard mulai ditekan. Event ini akan terus terpicu jika tombol ditahan (auto-repeat).

• Kegunaan: Menggerakkan karakter dalam game, shortcut keyboard (seperti Ctrl+S).

B. Keyup

Dipicu saat tombol pada keyboard dilepaskan.

• Kegunaan: Validasi form secara real-time (mengecek panjang password saat user selesai mengetik).

Contoh Penggunaan Keyboard Event:

window.addEventListener('keydown', (e) => { console.log(`Tombol yang ditekan: ${e.key}`); if (e.key === 'Enter') { console.log('Anda menekan tombol Enter untuk konfirmasi.'); }
});

Perbedaan Utama: Mouseenter vs Mouseover

Sering kali pemula bingung antara mouseenter dan mouseover.

• mouseenter: Hanya terpicu sekali saat masuk ke elemen induk. Sangat stabil untuk animasi.

• mouseover: Akan terus terpicu jika kursor berpindah dari elemen induk ke elemen anak di dalamnya.

Tabel Ringkasan Event

Tutorial Praktis: Deteksi Input User

Mari kita buat fitur sederhana yang mendeteksi apa yang diketik user dan memberikan efek visual saat mouse berada di atas input tersebut.

const inputUser = document.querySelector('#username'); // Memberi highlight saat kursor masuk
inputUser.addEventListener('mouseenter', () => { inputUser.style.borderColor = 'blue';
}); // Menghapus highlight saat kursor keluar
inputUser.addEventListener('mouseleave', () => { inputUser.style.borderColor = '#ccc';
}); // Mendeteksi saat user melepaskan tombol keyboard
inputUser.addEventListener('keyup', (e) => { const jumlahKarakter = e.target.value.length; console.log(`User sedang mengetik... Panjang karakter: ${jumlahKarakter}`);
});