Rumah  >  Artikel  >  hujung hadapan web  >  Acara pemuatan halaman tetingkap analisis contoh JavaScript

Acara pemuatan halaman tetingkap analisis contoh JavaScript

WBOY
WBOYke hadapan
2022-08-05 09:24:082577semak imbas

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.

Acara pemuatan halaman tetingkap analisis contoh JavaScript

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Tetingkap memuatkan halaman Acara

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() { }).

  • Apabila acara DOMContentLoaded dicetuskan, hanya
apabila DOM dimuatkan, tidak termasuk helaian gaya, gambar, kilat
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 piksel
window.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 ini
3f1c4e4b6b16bbbd69b2ee476dc4f83a
      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
73a6ac4ed44ffec12cee46588e518a5e
Klik 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!

Kenyataan:
Artikel ini dikembalikan pada:csdn.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam