by 
Merespons aksi pengguna seperti klik, ketikan, atau pengiriman form adalah inti dari halaman interaktif. Artikel ini membahas cara menambahkan event listener di JavaScript.
Metode addEventListener()
<script>
const tombol = document.getElementById("tombol");
tombol.addEventListener("click", function() {
alert("Tombol diklik!");
});
</script>
Contoh Kasus: Beberapa Aksi pada Satu Elemen
<script>
const input = document.getElementById("cari");
input.addEventListener("focus", () => console.log("mulai mengetik"));
input.addEventListener("input", () => console.log("nilai berubah"));
input.addEventListener("blur", () => console.log("selesai"));
</script>
Kelebihan addEventListener() dibanding atribut onclick: bisa memasang banyak listener pada satu elemen.
| Event | Terjadi Saat |
|---|---|
| click | Elemen diklik |
| input | Nilai input berubah |
| submit | Form dikirim |
| keydown | Tombol keyboard ditekan |
Menghapus Listener
<script>
function halo() { console.log("hai"); }
tombol.addEventListener("click", halo);
tombol.removeEventListener("click", halo); // hapus
</script>
Kesimpulan
Gunakan addEventListener() untuk merespons aksi pengguna. Metode ini lebih fleksibel dari onclick karena mendukung banyak listener sekaligus dan bisa dihapus dengan removeEventListener().
Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi JavaScript (MDN).
