Javascript Addeventlistener Click Get Element

MUAZHAN

4 min read

·

Jun 20, 2024

45

Share

Menggunakan addEventListener untuk Tangani Klik dan Dapatkan Elemen di JavaScript

addEventListener adalah metode yang digunakan untuk menambahkan event listener pada elemen HTML. Event listener ini memungkinkan JavaScript untuk merespon event yang terjadi pada elemen tersebut, seperti klik, mouseover, atau perubahan nilai input.

Dalam artikel ini, kita akan fokus pada penggunaan addEventListener untuk menangani event klik dan mendapatkan elemen yang diklik.

Mengenal addEventListener

Sintaks:

element.addEventListener(event, function, useCapture);

Parameter:

• element: Elemen HTML tempat event listener akan ditambahkan.
• event: Nama event yang akan ditangani, seperti "click", "mouseover", atau "change".
• function: Fungsi yang akan dijalankan ketika event terjadi.
• useCapture: Opsional. Nilai boolean yang menentukan apakah event akan ditangani dalam fase capturing atau bubbling. Defaultnya adalah false.

Menangani Klik dan Mendapatkan Elemen

Berikut adalah langkah-langkah untuk menangani event klik dan mendapatkan elemen yang diklik:

1. Dapatkan Elemen: Gunakan document.querySelector atau document.getElementById untuk mendapatkan elemen HTML yang ingin Anda tangani event kliknya.

2. Tambahkan Event Listener: Gunakan addEventListener dengan parameter "click" untuk menangani event klik pada elemen tersebut.

3. Fungsi Handler: Tulis fungsi yang akan dijalankan ketika event klik terjadi. Di dalam fungsi ini, Anda dapat menggunakan this untuk mengakses elemen yang diklik.

Contoh:

Klik saya!

Penjelasan:

• Script di atas menambahkan event listener pada elemen <p> dengan ID "paragraph".
• Ketika paragraf ini diklik, fungsi handler akan dijalankan.
• Fungsi handler menampilkan pesan ke konsol dan menampilkan elemen yang diklik (this).

Memanfaatkan Event Object

Event object (event) menyimpan informasi terkait event yang terjadi. Anda dapat mengaksesnya di dalam fungsi handler.

Contoh:

paragraph.addEventListener("click", function(event) {
  console.log("Target:", event.target);
  console.log("X Koordinat:", event.clientX);
  console.log("Y Koordinat:", event.clientY);
});

Penjelasan:

• event.target merujuk ke elemen yang diklik.
• event.clientX dan event.clientY memberikan koordinat klik relatif terhadap jendela browser.

Kesimpulan

addEventListener adalah alat yang kuat untuk menangani event dalam JavaScript. Dengan menggunakan addEventListener dan event object, Anda dapat membuat aplikasi web yang interaktif dan responsif.