Sign in Subscribe
Javascript

Click Event: Ngakalin Klik Biar Lebih Interaktif

Click Event: Ngakalin Klik Biar Lebih Interaktif
Photo by Mediamodifier / Unsplash

Saat menggunakan website atau aplikasi web, hampir semua interaksi pengguna melibatkan klik. Baik itu klik tombol, link, gambar, atau bahkan area tertentu dalam halaman. JavaScript menyediakan mekanisme yang powerful untuk menangani click event, yang bisa digunakan untuk membuat tampilan lebih interaktif dan dinamis.

Dalam artikel ini, kita akan membahas apa itu click event, bagaimana cara menggunakannya, serta contoh penerapannya untuk meningkatkan pengalaman pengguna.

Apa Itu Click Event?

Click event adalah salah satu event dalam JavaScript yang terjadi ketika pengguna mengklik suatu elemen dalam halaman web. Event ini dapat digunakan untuk menjalankan fungsi tertentu saat elemen tersebut diklik.

Sintaks dasar untuk menangani click event:

element.addEventListener("click", function() {
    // Aksi yang akan dilakukan ketika elemen diklik
});

Cara Menggunakan Click Event

1. Menangani Klik pada Tombol

Contoh paling umum adalah menangani klik pada tombol:

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

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

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

2. Menambahkan Click Event ke Banyak Elemen

Terkadang, kita ingin menambahkan event ke banyak elemen sekaligus, misalnya semua tombol dalam halaman.

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

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

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

Setiap tombol akan memiliki event klik sendiri-sendiri tanpa perlu menulis kode berulang.

3. Menggunakan Click Event untuk Toggle Mode

Kita bisa menggunakan click event untuk mengaktifkan dan menonaktifkan sesuatu, misalnya dark mode.

<button id="toggle">Dark Mode</button>

const tombol = document.getElementById("toggle");
tombol.addEventListener("click", function() {
    document.body.classList.toggle("dark-mode");
});

Dengan classList.toggle(), setiap kali tombol diklik, mode akan berubah antara dark mode dan mode biasa.

Mencegah Perilaku Default Klik

Beberapa elemen memiliki perilaku default saat diklik, misalnya:

  • Link (<a>) akan berpindah ke halaman lain.
  • Tombol submit (<button type="submit">) akan mengirimkan form.

Untuk mencegahnya, gunakan event.preventDefault().

<a href="https://example.com" id="link">Klik Aku</a>

document.getElementById("link").addEventListener("click", function(event) {
    event.preventDefault();
    alert("Link tidak akan berpindah!");
});

Dengan kode ini, klik pada link tidak akan membuka halaman baru.

Delegasi Event untuk Elemen Dinamis

Jika elemen dibuat secara dinamis dengan JavaScript, event listener harus ditambahkan ke elemen induknya menggunakan event delegation.

<ul id="daftar">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<button id="tambah">Tambah Item</button>

const daftar = document.getElementById("daftar");
document.getElementById("tambah").addEventListener("click", function() {
    const itemBaru = document.createElement("li");
    itemBaru.textContent = "Item Baru";
    daftar.appendChild(itemBaru);
});

daftar.addEventListener("click", function(event) {
    if (event.target.tagName === "LI") {
        alert(`Kamu klik ${event.target.textContent}`);
    }
});

Dengan event delegation, kita bisa menangani event klik meskipun elemen <li> baru ditambahkan setelah halaman dimuat.

Kapan Menggunakan Click Event?

✅ Jika ingin menjalankan fungsi tertentu saat tombol diklik.
✅ Jika ingin mengubah elemen halaman berdasarkan aksi pengguna.
✅ Jika ingin membuat interaksi yang lebih dinamis, seperti toggle atau animasi.
✅ Jika ingin menangani elemen yang ditambahkan secara dinamis menggunakan event delegation.

❌ Jangan gunakan click event jika bisa dicapai dengan CSS saja, seperti hover effect.

Kesimpulan

  • Click event digunakan untuk menangani interaksi klik pengguna dalam halaman web.
  • Bisa ditambahkan ke elemen tertentu menggunakan addEventListener("click", callback), baik untuk satu elemen maupun banyak elemen sekaligus.
  • Bisa digunakan untuk berbagai keperluan seperti toggle, navigasi, dan event delegation.
  • Gunakan preventDefault() jika ingin mencegah perilaku default dari elemen tertentu seperti link atau tombol submit.

Dengan memahami cara kerja click event, kita bisa membuat halaman yang lebih interaktif dan menarik untuk pengguna.

Read next