Sign in Subscribe
Javascript

addEventListener(): Trik Ampuh Biar Event di Web Makin Pro!

addEventListener(): Trik Ampuh Biar Event di Web Makin Pro!
Photo by Marco Tjokro / Unsplash

Ketika membangun website interaktif, kita sering butuh mendeteksi aksi pengguna, seperti klik, input, atau pergerakan mouse. addEventListener() adalah metode JavaScript yang paling fleksibel dan powerful untuk menangani event di elemen HTML.

Dibandingkan dengan metode lama seperti onclick atau onchange, addEventListener() memberikan lebih banyak kontrol dan memungkinkan kita menambahkan beberapa event sekaligus tanpa menimpa yang lain.

Cara Kerja addEventListener()

Metode addEventListener() digunakan untuk menetapkan event ke elemen HTML tanpa mengganggu event lain yang sudah ada.

Sintaks Dasar

element.addEventListener("event", function, useCapture);
  • event → Nama event (misalnya click, keydown, mouseover).
  • function → Fungsi yang akan dijalankan ketika event terjadi.
  • useCapture → Opsional, menentukan apakah event menggunakan bubbling atau capturing (default: false).

Contoh Penggunaan addEventListener()

1. Menangani Event Klik pada Tombol

<button id="tombol">Klik Saya</button>
<p id="hasil"></p>

document.getElementById("tombol").addEventListener("click", function() {
    document.getElementById("hasil").innerText = "Tombol telah diklik!";
});

Ketika tombol diklik, teks dalam paragraf akan berubah menjadi "Tombol telah diklik!".

2. Menambahkan Event pada Banyak Elemen Sekaligus

Kita bisa menggunakan addEventListener() dalam loop untuk menetapkan event ke banyak elemen sekaligus.

<button class="tombol">Tombol 1</button>
<button class="tombol">Tombol 2</button>
<button class="tombol">Tombol 3</button>

const tombolList = document.querySelectorAll(".tombol");

tombolList.forEach((tombol) => {
    tombol.addEventListener("click", function() {
        alert(`Kamu menekan ${tombol.innerText}`);
    });
});

Setiap tombol akan memiliki event klik sendiri-sendiri.

3. Menggunakan Event Listener dengan Parameter

Terkadang kita butuh parameter tambahan saat menangani event.

function tampilkanPesan(pesan) {
    alert(pesan);
}

document.getElementById("tombol").addEventListener("click", function() {
    tampilkanPesan("Halo, kamu baru saja mengklik tombol!");
});

4. Menghapus Event Listener dengan removeEventListener()

Kita juga bisa menghapus event listener yang sudah ditambahkan sebelumnya.

function salam() {
    console.log("Halo!");
}

document.getElementById("tombol").addEventListener("click", salam);
document.getElementById("tombol").removeEventListener("click", salam);

Agar removeEventListener() bisa bekerja, fungsi yang ditambahkan harus dalam bentuk nama fungsi, bukan fungsi anonim.

Perbedaan addEventListener() vs Event Handler Lama

Metode Bisa Banyak Event? Bisa Dihapus? Fleksibilitas
element.onclick = fn ❌ Tidak ❌ Tidak 🔴 Terbatas
addEventListener() ✅ Bisa ✅ Bisa 🟢 Lebih fleksibel

Kapan Menggunakan addEventListener()?

✅ Jika ingin menangani banyak event tanpa menimpa event lain.
✅ Jika butuh kontrol lebih lanjut seperti menghapus event listener.
✅ Jika ingin menetapkan event ke banyak elemen sekaligus.

Kesimpulan

  • addEventListener() adalah metode terbaik untuk menangani event dalam JavaScript.
  • Bisa digunakan untuk menangani banyak event tanpa menimpa yang lain.
  • Lebih fleksibel dibandingkan event handler lama (onclick, onchange).
  • Dapat dikombinasikan dengan removeEventListener() untuk menghapus event listener.

Dengan memahami cara kerja addEventListener(), kita bisa membuat interaksi web yang lebih dinamis, interaktif, dan mudah dikontrol. Yuk, langsung coba di proyekmu!

Read next