Rumah > Artikel > hujung hadapan web > Acara pemuatan halaman tetingkap analisis contoh JavaScript
Artikel ini membawakan anda pengetahuan yang berkaitan tentang javascript, yang terutamanya memperkenalkan acara tetingkap window.onload ialah peristiwa pemuatan tetingkap (halaman), yang berlaku apabila kandungan dokumen dimuatkan sepenuhnya akan dicetuskan. Mari kita lihat.
[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]
window. onload = function() {}或者 window.addEventListener(' load ', function() {});
window.onload ialah peristiwa memuatkan tetingkap (halaman) Peristiwa ini akan dicetuskan apabila kandungan dokumen dimuatkan sepenuhnya (termasuk imej, fail skrip, dokumen CSS, dll.).
Nota:
Dengan window.onload anda boleh menulis kod js ke Atas elemen halaman, kerana onload menunggu semua kandungan halaman dimuatkan sebelum melaksanakan fungsi pemprosesan; tetingkap terakhir.onload akan diguna pakai.
Tiada had apabila menggunakan window.addEventListener('load', function() { }).
document.addEventListener( 'DOMContentLoaded' , function() { })
, dsb. . Jika terdapat banyak gambar pada halaman, ia mungkin mengambil masa yang lama dari akses pengguna untuk mencetuskan onload, dan kesan interaktif tidak dapat direalisasikan, yang pasti akan menjejaskan pengalaman pengguna lebih sesuai digunakan DOMContentLoaded .
acara ubah saiz tetingkap
window.onresize ialah acara pemuatan ubah saiz tetingkap, yang akan dicetuskan apabila saiz tetingkap berubah dalam pikselwindow.onresize = funtion(){} window.addEventListener("resize",funtion(){});Dan panggil fungsi pemprosesan
. Acara ini sering digunakan untuk melengkapkan reka letak responsif. window.innerWidth Lebar skrin semasa.
Ditambah:acara pageshow
, acara ini3f1c4e4b6b16bbbd69b2ee476dc4f83a window,addEventListener('resize',function(){ console.log(window.innerWidth); }) 2cacc6d41bbb37262a98f745aa00fbf0
dicetuskan apabila halaman dipaparkan, tidak kira sama ada halaman itu berasal dari cache . Dalam halaman yang dimuat semula, pageshow akan dicetuskan selepas acara pemuatan dicetuskan; Tentukan sama ada acara pageshow dicetuskan oleh halaman dalam cache berdasarkan berterusan dalam objek acara.
Contoh adalah seperti berikut:
window.onload ialah peristiwa pemuatan tetingkap (halaman), yang akan dicetuskan apabila kandungan dokumen dimuatkan sepenuhnya (termasuk imej, fail skrip, fail CSS, dll.), fungsi pemprosesan dipanggil Dengan window.onload, anda boleh menulis kod JS di atas elemen halaman, kerana onload menunggu untuk semua kandungan halaman untuk dimuatkan, dan kemudian Untuk melaksanakan fungsi pemprosesan;
kaedah acara pendaftaran tradisional window.onload hanya boleh ditulis sekali Jika terdapat berbilang, tetingkap terakhir.onload akan diguna pakai;
Jika addEventListener digunakan, tiada Pengehadan;
Apabila acara DOMContentLoaded dicetuskan, hanya apabila DOM dimuatkan, tidak termasuk helaian gaya, gambar, denyar, dll.; Le9 dan ke atas hanya disokong;
Jika gambar pada halaman Dalam banyak kes, ia mungkin mengambil masa yang lama dari akses pengguna untuk mencetuskan beban DOMContentl boleh digunakan
status berjalan; Ini muncul dahulu; ini ialah pop timbul selepas pemuatan DOM selesai ; >
76c82f278ac045591c9159d381de2c57 100db36a723c770d327fc0aef2ce13b1 93f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f 46d5fe1c7617e3914f214aaf043f4ccf 531ac245ce3e4fe3d50054a55f265927 8019067d09615e43c7904885b5246f0a window.addEventListener('load', function() { var btn = document.querySelector('button'); btn.addEventListener('click', function() { alert('点击我'); }) }) window.addEventListener('load', function() { alert(22); }) document.addEventListener('DOMContentLoaded', function() { alert(33); }) 2cacc6d41bbb37262a98f745aa00fbf0 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d a5d9cc459240d83bcb5c71b35fa6d7f1请点击65281c5ac262bf6d81768915a4a77ac0 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5eKlik butang untuk memainkan ini; kerana kod adalah acara pemuatan yang didaftarkan dengan addEventListener;
Kaedah DOM DOMSelector() melakukan tidak memerlukan sokongan tambahan seperti jQuery, dan juga boleh mendapatkan elemen DOM dengan mudah Sintaks adalah serupa dengan kaedah querySelector() Hanya mengembalikan elemen pertama yang sepadan dengan pemilih yang ditentukan; kali pertama saya melihat ini; ia kelihatan betul;
[Cadangan berkaitan:
tutorial video javascript, bahagian hadapan web
]Atas ialah kandungan terperinci Acara pemuatan halaman tetingkap analisis contoh JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!