Sebuah acara adalah bagian penting dari Sebuah halaman web merespon sesuai dengan peristiwa yang terjadi. Beberapa acara dibuat oleh pengguna dan beberapa dibuat oleh API. Pada artikel ini, kita akan melihat bagaimana peristiwa terjadi dan bagaimana metode addEventListener di JavaScript digunakan dalam urutan berikut:
- Apa itu Pemroses Peristiwa?
- AddEventListener () di JavaScript
- Nilai Parameter
- AddEventListener di JavaScript: Contoh
Apa itu Pemroses Peristiwa?
Pemroses peristiwa adalah prosedur dalam JavaScript yang menunggu peristiwa terjadi. Contoh sederhana dari file peristiwa adalah pengguna yang mengklik mouse atau menekan tombol pada keyboard.
Itu addEventListener () adalah bawaan Fungsi JavaScript yang mengambil peristiwa untuk didengarkan, dan argumen kedua akan dipanggil setiap kali peristiwa yang dijelaskan dipecat. Sejumlah penangan peristiwa dapat ditambahkan ke satu elemen tanpa menimpa penangan peristiwa yang ada.
addEventListener () di JavaScript
Beberapa dari fitur metode pendengar acara meliputi:
- Itu addEventListener () metode melampirkan penanganan acara ke elemen yang ditentukan.
- Metode ini melampirkan penangan kejadian ke elemen tanpa menimpa penangan acara yang ada.
- Kamu bisa menambahkan banyak penangan acara ke satu elemen.
- Anda dapat menambahkan banyak penangan acara dari Tipe yang sama untuk satu elemen , yaitu dua peristiwa 'klik'.
- Pendengar acara dapat ditambahkan ke salah satu PERTIMBANGAN objek tidak hanya elemen HTML. yaitu objek jendela.
- Metode addEventListener () membuatnya lebih mudah untuk mengontrol cara acara bereaksi untuk menggelegak.
Saat menggunakan metode addEventListener (), JavaScript dipisahkan dari markup, untuk keterbacaan yang lebih baik dan memungkinkan Anda menambahkan event listener bahkan saat Anda tidak mengontrol markup HTML.
Selain itu, Anda dapat dengan mudah menghapus event listener dengan menggunakan removeEventListener () .
Sintaksis:
target.addEventListener (type, listener [, options]) target.addEventListener (type, listener [, useCapture]) target.addEventListener (type, listener [, useCapture, wantUntrusted])
Nilai Parameter
| Parameter | Deskripsi |
peristiwa | Yg dibutuhkan. String yang menentukan nama acara. perbedaan antara extends dan implement Catatan: Jangan gunakan awalan 'on'. Misalnya, gunakan 'klik', bukan 'onclick'. Untuk daftar semua event HTML DOM, lihat Referensi Objek Event HTML DOM lengkap kami. |
fungsi fungsi anggota statis di c ++ | Yg dibutuhkan. Menentukan fungsi untuk dijalankan ketika acara tersebut terjadi. Saat peristiwa terjadi, objek peristiwa dilewatkan ke fungsi sebagai parameter pertama. Jenis acara obyek tergantung pada acara yang ditentukan. Misalnya, acara 'click' milik objek MouseEvent. |
useCapture | Pilihan. Nilai Boolean yang menentukan apakah acara harus dijalankan dalam fase penangkapan atau gelembung udara. Nilai yang mungkin: benar - Penangan kejadian dijalankan dalam fase penangkapan salah- Default. Penangan acara dijalankan dalam fase menggelegak |
Sekarang setelah Anda mengetahui cara kerja event listener, mari kita lihat contoh addEventListener () di JavaScript.
addEventListener () di JavaScript: Contoh
& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & gt Contoh ini menggunakan metode addEventListener () untuk menjalankan fungsi saat pengguna mengklik tombol. & lt / p & gt & ltbutton id = 'myBtn' & gtCoba & lt / button & gt & ltp id ='E '& gtIdcript & ltscript ('myBtn'). addEventListener ('click', myFunction) function myFunction () {document.getElementById ('demo'). innerHTML = 'Hello World'} & lt / script & gt & lt / body & gt & lt / html & gt 
Dengan ini, kita mengakhiri addEventListener ini di JavaScript. Saya harap Anda mengerti bagaimana acara pendengar metode bekerja di JavaScript.
Lihat kami yang dilengkapi dengan pelatihan langsung yang dipimpin instruktur dan pengalaman proyek kehidupan nyata. Pelatihan ini membuat Anda mahir dalam keterampilan untuk bekerja dengan teknologi web back-end dan front-end. Ini mencakup pelatihan tentang Pengembangan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.
Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar blog 'addEventListener in JavaScript' dan kami akan menghubungi Anda kembali.