← JavaScript28 / 69

addEventListener

addEventListener('click', fn) menghubungkan aksi pengguna ke fungsi. Perhatikan: kirim referensi fungsi, bukan hasil pemanggilannya — addEventListener('click', fn()) salah karena fungsinya langsung dijalankan sekali lalu hasilnya (biasanya undefined) yang dipasang. Kalau kamu perlu mengirim argumen, bungkus dengan arrow function seperti addEventListener('click', () => hapus(id)) agar fungsinya baru berjalan saat diklik.

👀 Contoh dulu

const btn = document.querySelector('button');

// ✅ kirim referensi fungsi
btn.addEventListener('click', () => {
  console.log('Diklik!');
});

// ❌ ini salah: fungsi langsung jalan sekali
// btn.addEventListener('click', sapa());

Hasilnya: Setiap kali tombol diklik, muncul 'Diklik!' di panel output.

💡 Event lain yang sering dipakai: 'input' (tiap ketikan), 'change', 'submit', 'keydown'.

📝 Sekarang giliranmu

Pasang event listener click pada #tombol yang menampilkan 'Tombol diklik' lewat console.log.

Preview

← Sebelumnya Berikutnya →