Acara adalah bahagian penting dari .Laman web bertindak balas mengikut peristiwa yang berlaku. Beberapa acara dibuat oleh pengguna dan beberapa acara dihasilkan oleh API. Dalam artikel ini, kita akan melihat bagaimana peristiwa berlaku dan bagaimana kaedahnya, addEventListener dalam JavaScript digunakan dalam urutan berikut:
- Apakah Pendengar Acara?
- AddEventListener () dalam JavaScript
- Nilai Parameter
- AddEventListener dalam JavaScript: Contoh
Apakah Pendengar Acara?
Pendengar acara adalah prosedur dalam JavaScript yang menunggu peristiwa berlaku. Contoh mudah bagi peristiwa adalah pengguna mengklik tetikus atau menekan kekunci pada papan kekunci.
The tambahEventListener () adalah terbina dalam Fungsi JavaScript yang memerlukan acara untuk didengarkan, dan argumen kedua dipanggil setiap kali peristiwa yang dijelaskan dipecat. Sebilangan besar pengendali acara boleh ditambahkan ke satu elemen tanpa menimpa pengendali acara yang ada.
addEventListener () dalam JavaScript
Sesetengah ciri-ciri kaedah pendengar acara merangkumi:
- The tambahEventListener () kaedah melampirkan sebuah Pengurus acara kepada elemen yang ditentukan.
- Kaedah ini melampirkan pengendali peristiwa ke elemen tanpa menimpa pengendali acara yang ada.
- Anda boleh menambah banyak pengendali acara kepada satu elemen.
- Anda boleh menambah banyak pengendali acara jenis yang sama kepada seorang unsur , iaitu dua acara 'klik'.
- Pendengar acara boleh ditambahkan pada mana-mana PENGHAKIMAN objek bukan sahaja elemen HTML. iaitu objek tingkap.
- Kaedah addEventListener () membuatnya lebih mudah untuk mengawal bagaimana peristiwa bertindak balas menggelegak.
Semasa menggunakan kaedah addEventListener (), JavaScript dipisahkan dari markup, untuk kebolehbacaan yang lebih baik dan membolehkan anda menambahkan pendengar acara walaupun anda tidak mengawal markup HTML.
Anda juga boleh membuang pendengar acara dengan mudah menggunakan kaedah removeEventListener () .
Sintaks:
target.addEventListener (type, listener [, options]) target.addEventListener (type, listener [, useCapture]) target.addEventListener (jenis, pendengar [, useCapture, wantUntrusted])
Nilai Parameter
| Parameter | Penerangan |
peristiwa | Dikehendaki. Rentetan yang menentukan nama acara. Catatan: Jangan gunakan awalan 'on'. Sebagai contoh, gunakan 'klik' dan bukan 'onclick'. java keluar dari kaedah Untuk senarai semua acara HTML DOM, lihat Rujukan Objek Acara HTML DOM lengkap kami. |
fungsi | Dikehendaki. Menentukan fungsi yang akan dijalankan semasa peristiwa itu berlaku. Ketika peristiwa itu terjadi, objek peristiwa diteruskan ke fungsi sebagai parameter pertama. Jenis acara objek bergantung pada peristiwa yang ditentukan. Sebagai contoh, peristiwa 'klik' milik objek MouseEvent. |
gunakanCapture | Pilihan. Nilai Boolean yang menentukan sama ada peristiwa itu harus dijalankan dalam menangkap atau dalam fasa menggelegak. Nilai yang mungkin: benar - Pengendali acara dijalankan dalam fasa tangkapan menangkap- Lalai. Pengendali acara dijalankan dalam fasa menggelegak |
Sekarang setelah anda mengetahui bagaimana pendengar acara berfungsi, mari kita lihat contoh addEventListener () dalam JavaScript.
addEventListener () dalam JavaScript: Contoh
& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & gtContoh ini menggunakan kaedah addEventListener () untuk melaksanakan fungsi apabila pengguna mengklik butang. & lt / p & gt & ltbutton id = 'myBtn' & gt mencuba & lt / gt & lt / gt & lt / gt & lt / gt & lt / gt & lt / gt & lt / gt & lt / gt & lt / gt & lt / lt / lt / lt / lt / lt / lt / lt / lt / ltld & lt / lt / lt / lt / lt / ltlt / lt / ltlt / ltlt / ltlt / ltltltlt / ltldbtltltldbtltltldbltltltl ('myBtn'). addEventListener ('click', myFunction) fungsi myFunction () {document.getElementById ('demo'). innerHTML = 'Hello World'} & lt / script & gt & lt / body & gt & lt / html & gt 
studio android langkah demi langkah
Dengan ini, kita akan mengakhiri addEventListener ini dalam JavaScript. Saya harap anda memahami bagaimana pendengar acara kaedah berfungsi dalam JavaScript.
Lihat kami yang dilengkapi dengan latihan langsung yang dipimpin oleh instruktur dan pengalaman projek kehidupan sebenar. Latihan ini menjadikan anda mahir dalam kemahiran bekerja dengan teknologi web back-end dan front-end. Ia merangkumi latihan mengenai Pembangunan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.
Ada soalan untuk kami? Sila sebutkan di bahagian komen blog 'addEventListener in JavaScript' dan kami akan menghubungi anda.