Add Mouse Click Event Listener Javascript

MUAZHAN

4 min read

·

Jun 22, 2024

41

Share

Cara Menambahkan Event Listener untuk Klik Mouse di JavaScript

Event listener adalah bagian penting dari interaksi pengguna dalam pengembangan web. Dalam JavaScript, event listener memungkinkan kita untuk mendeteksi dan merespon berbagai event yang terjadi pada elemen HTML, termasuk klik mouse.

Artikel ini akan membahas cara menambahkan event listener untuk klik mouse menggunakan JavaScript.

1. Menggunakan addEventListener()

Metode addEventListener() adalah cara standar untuk menambahkan event listener pada elemen HTML. Berikut adalah sintak dasarnya:

element.addEventListener(event, function, useCapture);

• element: Elemen HTML yang ingin dilampiri event listener.
• event: Nama event yang ingin dideteksi. Dalam kasus ini, gunakan "click".
• function: Fungsi yang akan dieksekusi ketika event terjadi.
• useCapture: Parameter opsional yang menentukan apakah event akan ditangkap atau digelembungkan. Biasanya, kita tidak perlu khawatir tentang parameter ini dan dapat dibiarkan kosong.

Contoh:

  


  Klik Saya
  

Kode di atas menambahkan event listener ke tombol dengan id "myButton". Ketika tombol diklik, fungsi anonim yang diberikan sebagai parameter kedua akan dieksekusi, menampilkan pesan "Tombol diklik!" di kotak dialog.

2. Menggunakan Atribut onclick

Cara tradisional untuk menambahkan event listener untuk klik mouse adalah dengan menggunakan atribut onclick pada elemen HTML.

Contoh:

  


  Klik Saya

Kode di atas langsung memanggil fungsi alert() ketika tombol diklik.

Perbedaan addEventListener() dan onclick:

• addEventListener() lebih fleksibel dan memungkinkan kita untuk menambahkan beberapa event listener ke elemen yang sama.
• onclick hanya memungkinkan satu fungsi untuk dijalankan ketika event terjadi.

3. Menangani Multiple Klik Mouse

Event listener untuk klik mouse dapat dibedakan berdasarkan tombol mouse yang digunakan. Misalnya, kita bisa membedakan antara klik kiri, klik kanan, dan klik tengah.

• Klik kiri: MouseEvent.button === 0
• Klik kanan: MouseEvent.button === 2
• Klik tengah: MouseEvent.button === 1

Contoh:

button.addEventListener('click', (event) => {
  if (event.button === 0) {
    alert('Klik kiri!');
  } else if (event.button === 2) {
    alert('Klik kanan!');
  }
});

Kode di atas menampilkan pesan yang berbeda berdasarkan tombol mouse yang digunakan untuk mengklik tombol.

Kesimpulan

Menambahkan event listener untuk klik mouse di JavaScript adalah proses yang sederhana dan dapat dilakukan dengan beberapa cara. addEventListener() adalah metode yang direkomendasikan karena fleksibilitasnya, sedangkan onclick merupakan cara tradisional yang lebih ringkas. Pemilihan metode terbaik tergantung pada kebutuhan dan preferensi Anda.