Add Custom Event Listener Javascript

3 min read Jun 22, 2024

Menambahkan Event Listener Kustom di JavaScript

Event listener adalah mekanisme dalam JavaScript yang memungkinkan kita untuk menanggapi kejadian yang terjadi pada elemen HTML. Event listener default seperti click, mouseover, dan submit sudah tersedia di JavaScript. Namun, terkadang kita perlu membuat event listener kustom untuk menangani kejadian yang tidak disediakan secara bawaan.

Apa itu Event Listener Kustom?

Event listener kustom memungkinkan kita untuk mendefinisikan dan memicu event sendiri, yang kemudian dapat ditanggapi oleh fungsi yang kita tentukan. Ini sangat berguna untuk membangun aplikasi yang lebih kompleks dan interaktif.

Cara Menambahkan Event Listener Kustom

Berikut langkah-langkah untuk menambahkan event listener kustom di JavaScript:

Buat Objek Event: Pertama, kita perlu membuat objek event baru menggunakan constructor new Event('nama_event').
Tambahkan Event Listener: Gunakan method addEventListener() pada elemen HTML yang ingin kita tanggapi. Sertakan nama event kustom dan fungsi yang akan dijalankan saat event dipicu.
Memicu Event: Gunakan method dispatchEvent() pada elemen HTML untuk memicu event kustom.

Contoh Penggunaan

Berikut contoh sederhana menambahkan event listener kustom untuk memicu perubahan warna pada sebuah elemen div:

// Buat objek event kustom
const customEvent = new Event('changeColor');

// Dapatkan elemen div
const myDiv = document.getElementById('myDiv');

// Tambahkan event listener
myDiv.addEventListener('changeColor', () => {
  myDiv.style.backgroundColor = 'red';
});

// Memicu event
myDiv.dispatchEvent(customEvent);

Penjelasan:

Kode di atas pertama-tama membuat objek event bernama changeColor.
Kemudian, sebuah event listener ditambahkan ke elemen myDiv yang akan dijalankan saat event changeColor dipicu.
Event changeColor dipicu dengan dispatchEvent().
Saat event dipicu, fungsi dalam event listener akan mengubah warna latar belakang myDiv menjadi merah.

Keuntungan Menggunakan Event Listener Kustom

Kontrol Lebih: Event listener kustom memberi kita kontrol penuh atas kejadian yang kita inginkan.
Fleksibilitas: Kita dapat memicu event kustom dari berbagai sumber, seperti fungsi, tombol, atau bahkan timer.
Organisasi Kode: Event listener kustom membantu kita mengatur kode dan memisahkan logika yang berbeda.

Kesimpulan

Event listener kustom adalah fitur penting dalam JavaScript yang memungkinkan kita untuk membangun aplikasi yang lebih kompleks dan interaktif. Dengan memahami cara menambahkan dan menggunakan event listener kustom, kita dapat mengembangkan aplikasi web yang lebih dinamis dan responsif.