Metode addEventListener () - Kode Contoh Pemroses Peristiwa JavaScript

Metode JavaScript addEventListener () memungkinkan Anda menyiapkan fungsi untuk dipanggil saat peristiwa tertentu terjadi, seperti saat pengguna mengklik tombol. Tutorial ini menunjukkan cara mengimplementasikan addEventListener () dalam kode Anda.

Memahami Acara dan Penangan Acara

Peristiwa adalah tindakan yang terjadi ketika pengguna atau browser memanipulasi halaman. Mereka memainkan peran penting karena dapat menyebabkan elemen halaman web berubah secara dinamis.

Misalnya, saat browser selesai memuat dokumen, maka loadterjadilah peristiwa. Jika pengguna mengklik tombol di halaman, maka sebuah clickperistiwa telah terjadi.

Banyak peristiwa bisa terjadi sekali, berkali-kali, atau tidak pernah. Anda juga mungkin tidak tahu kapan suatu peristiwa akan terjadi, terutama jika itu dibuat oleh pengguna.

Dalam skenario ini, Anda memerlukan pengendali kejadian untuk mendeteksi ketika suatu kejadian terjadi. Dengan cara ini, Anda dapat menyiapkan kode untuk bereaksi terhadap peristiwa yang terjadi dengan cepat.

JavaScript menyediakan penangan kejadian dalam bentuk addEventListener()metode. Penangan ini dapat dilampirkan ke elemen HTML tertentu yang ingin Anda pantau kejadiannya, dan elemen tersebut dapat memiliki lebih dari satu penangan yang terpasang.

addEventListener () Sintaks

Berikut sintaksnya:

target.addEventListener(event, function, useCapture) 
  • target : elemen HTML yang ingin Anda tambahi pengendali peristiwa. Elemen ini ada sebagai bagian dari Model Objek Dokumen (DOM) dan Anda mungkin ingin belajar tentang cara memilih elemen DOM.
  • event : string yang menentukan nama event. Kami sudah menyebutkan loaddan clickacara. Bagi yang penasaran, berikut daftar lengkap event HTML DOM.
  • function : menentukan fungsi yang akan dijalankan saat acara terdeteksi. Ini adalah keajaiban yang memungkinkan halaman web Anda berubah secara dinamis.
  • useCapture : nilai Boolean opsional (benar atau salah) yang menentukan apakah acara harus dijalankan dalam fase menangkap atau menggelembung. Dalam kasus elemen HTML bertingkat (seperti imgdalam a div) dengan penangan kejadian yang dilampirkan, nilai ini menentukan acara mana yang akan dieksekusi terlebih dahulu. Secara default, ini disetel ke false yang berarti pengendali kejadian HTML terdalam dijalankan terlebih dahulu (fase menggelembung).

Contoh Kode addEventListener ()

Ini adalah contoh sederhana yang saya buat yang menunjukkan Anda addEventListener()beraksi.

Ketika pengguna mengklik tombol, sebuah pesan ditampilkan. Klik tombol lain menyembunyikan pesan. Inilah JavaScript yang relevan:

let button = document.querySelector('#button'); let msg = document.querySelector('#message'); button.addEventListener('click', ()=>{ msg.classList.toggle('reveal'); }) 

Menggunakan sintaks yang ditunjukkan sebelumnya untuk addEventListener():

  • target : elemen HTML denganid='button'
  • function : anonim (panah) fungsi yang mengatur kode yang diperlukan untuk mengungkapkan / menyembunyikan pesan
  • useCapture : kiri ke nilai defaultfalse

Fungsi saya adalah dapat menampilkan / menyembunyikan pesan dengan menambahkan / menghapus kelas CSS yang disebut "mengungkapkan" yang mengubah visibilitas elemen pesan.

Tentu saja dalam kode Anda, silakan sesuaikan fungsi ini. Anda juga dapat mengganti fungsi anonim dengan fungsi bernama milik Anda.

Meneruskan Peristiwa sebagai Parameter

Terkadang kami mungkin ingin mengetahui lebih banyak informasi tentang acara tersebut, seperti elemen apa yang diklik. Dalam situasi ini, kita perlu meneruskan parameter event ke fungsi kita.

Contoh ini menunjukkan bagaimana Anda bisa mendapatkan id elemen:

button.addEventListener('click', (e)=>{ console.log(e.target.id) }) 

Di sini parameter peristiwa adalah variabel bernama etetapi dapat dengan mudah disebut apa pun seperti "peristiwa". Parameter ini merupakan objek yang berisi berbagai informasi tentang event seperti id target.

Anda tidak perlu melakukan sesuatu yang khusus dan JavaScript secara otomatis mengetahui apa yang harus dilakukan ketika Anda mengirimkan parameter dengan cara ini ke fungsi Anda.

Menghapus Penangan Acara

Jika karena alasan tertentu Anda tidak lagi ingin event handler diaktifkan, berikut cara menghapusnya:

target.removeEventListener(event, function, useCapture); 

Parameternya sama dengan addEventListener().

Latihan membuat sempurna

Cara terbaik untuk menjadi lebih baik dengan penangan acara adalah berlatih dengan kode Anda sendiri.

Berikut adalah contoh proyek yang saya lakukan di mana saya menggunakan event handler untuk mengubah warna, ukuran, dan kecepatan gelembung yang mengalir di latar belakang halaman web (Anda perlu mengklik panel tengah untuk membuka kontrol).

Bersenang-senanglah dan buat sesuatu yang luar biasa!

Untuk lebih banyak pengetahuan pengembangan web ramah pemula, kunjungi blog saya di 1000 Mile World dan ikuti saya di Twitter.