MUAZHAN
Home

Javascript Addeventlistener Click With Parameters

4 min read Jun 20, 2024
Javascript Addeventlistener Click With Parameters

Menggunakan addEventListener dengan Parameter dalam JavaScript

addEventListener dalam JavaScript adalah metode penting untuk menambahkan event listener ke elemen HTML. Ia memungkinkan Anda untuk menjalankan fungsi tertentu ketika sebuah event terjadi pada elemen tersebut.

Namun, terkadang Anda perlu mengirimkan informasi tambahan ke fungsi event listener. Inilah saatnya kita menggunakan parameter.

Mengirimkan Parameter dengan addEventListener

Ada beberapa cara untuk mengirimkan parameter ke fungsi addEventListener Anda:

1. Closure:

  • Closure adalah teknik yang memungkinkan fungsi internal untuk mengakses variabel dari lingkup luar.
const button = document.getElementById('myButton');

// Fungsi dengan parameter
function handleClick(param1, param2) {
  console.log("Tombol ditekan:", param1, param2);
}

// Mengatur event listener dengan closure
button.addEventListener('click', function() {
  handleClick("Nilai 1", "Nilai 2");
});

Kode di atas mendefinisikan fungsi handleClick yang menerima dua parameter. Kita kemudian membuat fungsi anonim dalam addEventListener yang memanggil handleClick dengan nilai yang ingin kita kirimkan.

2. Objek Event:

  • Objek event event memiliki properti dan metode yang dapat diakses saat sebuah event terjadi.
const button = document.getElementById('myButton');

// Fungsi dengan parameter dari objek event
function handleClick(event) {
  console.log("Tombol ditekan:", event.target.id);
}

button.addEventListener('click', handleClick);

Dalam contoh ini, fungsi handleClick menerima objek event sebagai parameter. Kita kemudian menggunakan properti target.id dari objek event untuk mendapatkan id dari elemen yang ditekan.

3. Data Atribut:

  • Anda bisa menggunakan data atribut pada elemen HTML untuk menyimpan informasi yang ingin Anda kirimkan.

Dalam contoh ini, data atribut data-value pada elemen button menyimpan nilai "Nilai 1". Dalam fungsi handleClick, kita mengambil nilai dari data atribut menggunakan event.target.dataset.value.

Keuntungan Menggunakan Parameter

  • Fleksibilitas: Parameter memungkinkan Anda untuk mengirimkan data yang dinamis dan spesifik ke fungsi event listener.
  • Reusabilitas: Fungsi event listener Anda menjadi lebih reusable karena Anda tidak harus menulis kode yang sama untuk setiap event.
  • Logika yang Lebih Jelas: Kode Anda menjadi lebih mudah dibaca dan dipahami karena logika event listener dipisahkan dari fungsi yang menerima parameter.

Kesimpulan

Dengan menggunakan parameter dalam addEventListener, Anda dapat memberikan informasi tambahan ke fungsi event listener, membuat kode Anda lebih dinamis, reusable, dan mudah dipahami. Pilih metode yang paling sesuai dengan kebutuhan Anda dan mulailah membangun aplikasi web yang lebih interaktif.

Javascript

Latest Posts

Featured Posts