Kaedah JavaScript addEventListener () memungkinkan anda mengatur fungsi yang akan dipanggil ketika peristiwa yang ditentukan terjadi, seperti ketika pengguna mengklik butang. Tutorial ini menunjukkan kepada anda bagaimana anda dapat melaksanakan addEventListener () dalam kod anda.
Memahami Acara dan Pengendali Acara
Peristiwa adalah tindakan yang berlaku ketika pengguna atau penyemak imbas memanipulasi halaman. Mereka memainkan peranan penting kerana boleh menyebabkan elemen laman web berubah secara dinamik.
Contohnya, apabila penyemak imbas selesai memuatkan dokumen, maka loadperistiwa berlaku. Sekiranya pengguna mengklik butang pada halaman, maka clickperistiwa telah berlaku.
Banyak peristiwa boleh berlaku sekali, berkali-kali, atau tidak pernah berlaku. Anda juga mungkin tidak tahu kapan suatu peristiwa akan berlaku, terutamanya jika ia dihasilkan oleh pengguna.
Dalam senario ini, anda memerlukan pengendali acara untuk mengesan kapan suatu peristiwa berlaku. Dengan cara ini, anda boleh menyiapkan kod untuk bertindak balas terhadap peristiwa ketika ia berlaku dengan cepat.
JavaScript menyediakan pengendali peristiwa dalam bentuk addEventListener()kaedah. Pengendali ini dapat dilampirkan pada elemen HTML tertentu yang ingin anda pantau peristiwanya, dan elemen tersebut dapat memiliki lebih dari satu pengendali.
sintaks addEventListener ()
Inilah sintaksnya:
target.addEventListener(event, function, useCapture) - target : elemen HTML yang ingin anda tambah pengendali acara anda. Elemen ini wujud sebagai sebahagian dari Model Objek Dokumen (DOM) dan anda mungkin ingin mengetahui cara memilih elemen DOM.
- event : rentetan yang menentukan nama acara. Kami sudah menyebut
loaddanclickperistiwa. Untuk yang ingin tahu, berikut adalah senarai penuh acara DOM HTML. - fungsi : menentukan fungsi yang akan dijalankan ketika peristiwa itu dikesan. Inilah keajaiban yang membolehkan laman web anda berubah secara dinamik.
- useCapture : nilai Boolean pilihan (benar atau salah) yang menentukan sama ada peristiwa itu harus dijalankan dalam fasa menangkap atau menggelegak. Sekiranya terdapat elemen HTML bersarang (seperti
imgdalam adiv) dengan pengendali peristiwa yang dilampirkan, nilai ini menentukan peristiwa mana yang akan dilaksanakan terlebih dahulu. Secara lalai, ia ditetapkan ke false yang bermaksud bahawa pengendali acara HTML paling dalam dilaksanakan terlebih dahulu (fasa menggelegak).
addEventListener () Contoh Kod
Ini adalah contoh mudah yang saya buat yang menunjukkan kepada anda addEventListener()tindakan.
Apabila pengguna mengklik butang, mesej akan dipaparkan. Klik butang lain menyembunyikan mesej. Inilah JavaScript yang berkaitan:
let button = document.querySelector('#button'); let msg = document.querySelector('#message'); button.addEventListener('click', ()=>{ msg.classList.toggle('reveal'); }) Mengikut sintaks yang ditunjukkan sebelumnya untuk addEventListener():
- sasaran : elemen HTML dengan
id='button' - fungsi : fungsi tanpa nama (anak panah) yang menetapkan kod yang diperlukan untuk mendedahkan / menyembunyikan mesej
- useCapture : kiri ke nilai lalai dari
false
Fungsi saya dapat mendedahkan / menyembunyikan mesej dengan menambahkan / membuang kelas CSS yang disebut "mendedahkan" yang mengubah keterlihatan elemen mesej.
Sudah tentu dalam kod anda, silakan menyesuaikan fungsi ini. Anda juga boleh mengganti fungsi tanpa nama dengan fungsi bernama anda sendiri.
Lulus Acara sebagai Parameter
Kadang-kadang kita mungkin ingin mengetahui lebih banyak maklumat mengenai acara tersebut, seperti elemen apa yang diklik. Dalam keadaan ini, kita perlu meneruskan parameter peristiwa ke fungsi kita.
Contoh ini menunjukkan bagaimana anda memperoleh id elemen:
button.addEventListener('click', (e)=>{ console.log(e.target.id) }) Di sini parameter peristiwa adalah pemboleh ubah yang dinamakan etetapi dapat dengan mudah disebut apa-apa lagi seperti "peristiwa". Parameter ini adalah objek yang mengandungi pelbagai maklumat mengenai peristiwa seperti id sasaran.
Anda tidak perlu melakukan sesuatu yang istimewa dan JavaScript secara automatik tahu apa yang harus dilakukan ketika anda menyampaikan parameter dengan cara ini ke fungsi anda.
Membuang Pengendali Acara
Sekiranya atas sebab tertentu anda tidak lagi mahu pengendali acara diaktifkan, berikut cara menghapusnya:
target.removeEventListener(event, function, useCapture); Parameternya sama seperti addEventListener().
Amalan Menjadi Sempurna
Cara terbaik untuk menjadi lebih baik dengan pengendali acara adalah berlatih dengan kod anda sendiri.
Berikut adalah contoh projek yang saya lakukan di mana saya menggunakan pengendali acara untuk mengubah warna, ukuran, dan kelajuan gelembung yang mengalir di latar belakang laman web (anda perlu mengklik panel tengah untuk mengungkapkan kawalannya).
Bersenang-senang dan pergi membuat sesuatu yang hebat!
Untuk pengetahuan pembangunan web yang lebih mesra pemula, lawati blog saya di 1000 Mile World dan ikuti saya di Twitter.