Artikel ini memberi Anda pengetahuan yang relevan tentang JavaScript. Ini terutama memperkenalkan ringkasan sederhana dari peristiwa. Peristiwa adalah beberapa momen interaktif tertentu yang terjadi di dokumen atau jendela browser. Mari kita lihat bersama-sama .
[Rekomendasi terkait: tutorial video javascript, web front-end]
Peristiwa adalah momen interaksi spesifik yang terjadi dalam dokumen atau jendela browser. Interaksi antara JavaScript dan HTML dicapai melalui peristiwa. Untuk aplikasi Web, ada peristiwa representatif berikut: peristiwa klik, peristiwa pergerakan masuk dan keluar mouse, peristiwa penekanan/pop-up keyboard, dll. Peristiwa adalah momen interaksi spesifik yang terjadi di jendela dokumen atau browser. Anda dapat menggunakan pendengar (atau pengendali peristiwa) untuk berlangganan peristiwa sehingga kode yang sesuai akan dieksekusi ketika peristiwa tersebut terjadi.
Berikut adalah pengenalan singkat tentang peristiwa yang umum digunakan berikut ini: peristiwa pemuatan dokumen, objek peristiwa, penggelembungan peristiwa, delegasi peristiwa, pengikatan peristiwa, propagasi peristiwa, dan peristiwa keyboard.
Peristiwa pemuatan dokumen (onload): Peristiwa onload dipicu setelah seluruh halaman dimuat. Gunakan seperti yang ditunjukkan:
Dari sudut pandang kinerja, lebih baik menulisnya di bagian bawah halaman! Kode js ditulis di bagian bawah halaman untuk memastikan halaman telah dimuat saat kode dijalankan. window.onload hanya dapat muncul satu kali pada halaman, dan kode selanjutnya akan menimpa kode sebelumnya.
Objek peristiwa: Setelah peristiwa terjadi, objek peristiwa akan dihasilkan dan diteruskan ke fungsi mendengarkan sebagai parameter. Kinerja spesifiknya adalah kita meneruskan parameter peristiwa dalam fungsi panggilan balik, dan nilai parameter ini secara otomatis diteruskan oleh JS. Objek acara ini akan berisi semua informasi yang relevan tentang acara ini, termasuk acara apa (mouse/keyboard), pemicu acara, target acara, dll.
Ketika suatu peristiwa pada objek DOM dipicu, objek peristiwa Peristiwa dihasilkan, yang berisi semua informasi terkait peristiwa. Meliputi unsur-unsur penyebab peristiwa, jenis peristiwa, dan informasi lain yang berkaitan dengan peristiwa tertentu. Browser standar DOM akan meneruskan objek event ke event handler. Apapun event handlernya, objek event diteruskan. Objek Event berisi properti dan metode yang terkait dengan event spesifik yang membuatnya. Jenis peristiwa yang dipicu berbeda-beda, serta properti dan metode yang tersedia juga berbeda. Berikut adalah pengenalan singkat tentang event mouse/keyboard seperti yang ditunjukkan pada gambar:
Objek event di IE berbeda dengan mengakses objek event di DOM. Ada beberapa cara berbeda untuk mengakses objek event di IE, bergantung pada cara Anda menentukan event handler. Di IE, objek acara ada sebagai atribut objek jendela. Anda dapat menggunakan window.event untuk mendapatkan objek acara. Saat menggunakan lampiranEvent(), objek acara juga akan diteruskan di handler, atau dapat digunakan di cara sebelumnya. Berikut contoh kasusnya: ketika mouse berada di atas kotak, tag p di bawah menampilkan koordinat mouse saat ini.
Render:
Diagram kode:
Peristiwa menggelegak (Bubble): Yang disebut gelembung mengacu pada penyebaran peristiwa ke atas. Ketika suatu peristiwa pada elemen turunan dipicu, peristiwa yang sama pada elemen leluhurnya juga akan dipicu. Gelembung berguna dalam sebagian besar situasi dalam pengembangan. Jika Anda tidak ingin terjadi gelembung, Anda dapat membatalkan gelembung tersebut melalui objek peristiwa event.cancelBubble=true.
Render:
Diagram kode:
Pendelegasian peristiwa: mengacu pada peristiwa yang mengikat ke elemen leluhur yang sama, sehingga ketika suatu peristiwa pada elemen turunan dipicu, peristiwa tersebut akan menggelembung ke elemen leluhur, dan peristiwa tersebut akan diproses melalui fungsi respons leluhur elemen. Delegasi acara menggunakan bubble. Delegasi dapat mengurangi jumlah pengikatan acara dan meningkatkan kinerja program. Target atribut dari objek peristiwa: mengembalikan elemen yang memicu peristiwa ini (simpul target peristiwa)
Kasus:
Render:
Diagram kode:
Pengikatan peristiwa: Kita dapat mengikat pengendali peristiwa ke suatu elemen dengan dua cara umum: mengikat dengan menentukan atribut peristiwa dari elemen HTML; mengikat dengan menentukan atribut objek DOM. Ada cara khusus lain yang disebut pengaturan pendengar acara, objek elemen: addEventListener(). Dua metode pertama dapat mengikat event handler, namun keduanya memiliki kelemahan yaitu hanya dapat mengikat satu program, dan tidak dapat mengikat banyak program untuk satu event. addEventListener(), melalui metode ini Anda juga dapat mengikat fungsi respons ke suatu elemen. Gunakan addEventListener() untuk mengikat beberapa fungsi respons ke peristiwa yang sama pada suatu elemen secara bersamaan. Dengan cara ini, ketika suatu peristiwa dipicu, fungsi respons akan dieksekusi dalam urutan pengikatan fungsi tersebut. Metode ini tidak mendukung browser IE8 dan di bawahnya, dan Anda perlu menggunakan AttachEvent sebagai gantinya. lampirkanEvent(), di IE8 Anda dapat menggunakan lampirkanEvent() untuk mengikat acara. Metode ini juga dapat mengikat beberapa fungsi pemrosesan ke suatu peristiwa pada saat yang sama. Perbedaannya adalah metode ini diikat terlebih dahulu dan dieksekusi terlebih dahulu. Urutan eksekusinya berlawanan dengan addEventListener().
Propagasi peristiwa: Propagasi peristiwa dapat dibagi menjadi tiga tahap: tahap penangkapan - dalam tahap penangkapan, peristiwa ditangkap dari elemen leluhur terluar ke elemen target, tetapi secara default peristiwa tersebut tidak akan dipicu pada saat ini; peristiwa ditangkap Elemen target mulai memicu peristiwa pada elemen target setelah penangkapan selesai; tahap penggelembungan - peristiwa ditransmisikan dari elemen target ke elemen leluhurnya, memicu peristiwa pada elemen leluhur secara bergantian.
Acara keyboard: onkeydown: Acara penekanan keyboard. Jika Anda terus menekan tombol tanpa melepaskannya, peristiwa tersebut akan selalu terpicu. Ketika peristiwa onkeydown dipicu secara terus-menerus, interval antara waktu pertama dan kedua akan sedikit lebih lama, dan waktu lainnya akan sangat cepat. Hal ini untuk mencegah penyalahgunaan. onkeyup: acara saat keyboard dilepaskan. Peristiwa keyboard umumnya terikat pada beberapa objek yang dapat memperoleh fokus atau dokumen...
Di atas adalah ringkasan singkat detail peristiwa JavaScript. Untuk informasi lebih lanjut, harap perhatikan artikel terkait lainnya di jaringan kode sumber!