Jago JavaScript 2 #5: Event Listener (Bikin Website Responsif!)

Event adalah segala sesuatu yang terjadi di website, baik itu karena ulah user (klik, ketik, scroll) atau karena browser itu sendiri (selesai loading). Listener adalah fungsi yang "menguping" atau menunggu kejadian tersebut terjadi.

🧩 Apa yang Akan Dipelajari

• Memahami cara kerja addEventListener.
• Menangkap interaksi mouse (Click, MouseOver).
• Menangkap interaksi keyboard (Keydown, Input).
• Memahami objek event (e) untuk mengambil data spesifik (seperti huruf apa yang ditekan).

⚙️ Persiapan

Coba bikin struktur HTML sederhana ini biar langsung kelihatan hasilnya:

<button id="btn-klik">Klik Aku!</button>
<p id="pesan">Belum ada aksi...</p>

<hr>

<input type="text" id="input-nama" placeholder="Ketik namamu...">
<h2 id="output-nama">Halo, ...</h2>

🚀 Langkah-Langkah

1. Cara Pakai addEventListener

Lupakan cara lama seperti onclick="..." di HTML. Cara modern adalah menggunakan addEventListener di JavaScript agar kode HTML kita tetap bersih.

const tombol = document.getElementById('btn-klik');
const teksPesan = document.getElementById('pesan');

// addeventListener('nama_event', fungsi_aksi)
tombol.addEventListener('click', function() {
    teksPesan.innerText = "Tombol sudah diklik! 🎉";
    teksPesan.style.color = "green";
});

2. Event Mouse Lainnya

Selain klik, kamu bisa mendeteksi saat mouse lewat atau pergi dari sebuah elemen.

tombol.addEventListener('mouseenter', () => {
    tombol.style.backgroundColor = 'yellow';
});

tombol.addEventListener('mouseleave', () => {
    tombol.style.backgroundColor = '';
});

3. Menangkap Ketikan Keyboard

Ini seru banget! Kita bisa tahu apa yang user ketik secara real-time. Di sini kita butuh parameter event (biasanya disingkat e) untuk mengambil nilainya.

const input = document.getElementById('input-nama');
const output = document.getElementById('output-nama');

input.addEventListener('input', (e) => {
    // e.target.value adalah apa yang diketik user
    output.innerText = `Halo, ${e.target.value}`;
});

4. Mengenal Objek event (e)

Setiap kali ada kejadian, JavaScript ngasih kita "paket data" berisi detail kejadian itu. Misalnya, tombol keyboard mana yang ditekan?

input.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
        alert('Kamu menekan tombol Enter!');
    }
});

💡 Tips Tambahan

• Arrow Function: Gunakan Arrow Function () => {} biar kodemu lebih ringkas dan kekinian.
• Remove Event: Kalau kamu butuh mematikan interaksi, ada fungsi removeEventListener. Tapi ingat, fungsi aksinya harus punya nama (bukan anonim).
• Bubbling & Capturing: Ini istilah keren buat urutan kejadian kalau ada elemen di dalam elemen. Untuk sekarang, fokus dulu ke penggunaan dasar ya!

❗ Troubleshooting

Masalah: Kenapa addEventListener saya error Cannot read property 'addEventListener' of null? Solusi: Ini paling sering terjadi! Artinya JavaScript gak nemuin elemen dengan ID tersebut. Cek lagi apakah ID di HTML dan di JS sudah sama persis (huruf besar-kecil ngaruh!). Juga pastikan script dipanggil di bawah elemen HTML-nya.

🎯 Kesimpulan

Event Listener adalah kunci utama interaktivitas. Kamu sudah bisa nangkep klik dan nangkep ketikan. Gabungin ini dengan materi classList kemarin, kamu sudah bisa bikin sidebar yang muncul saat diklik atau input yang berubah warna saat diisi!