Acara pemuatan halaman tetingkap analisis contoh JavaScript-tutorial js-php.cn

Acara pemuatan halaman tetingkap analisis contoh JavaScript

WBOY

Lepaskan： 2022-08-05 09:24:08

ke hadapan

2645 orang telah melayarinya

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(&#39;
load
&#39;, function() {});

Salin selepas log masuk

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(
&#39;DOMContentLoaded&#39;
, function() { })

Salin selepas log masuk

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

Salin selepas log masuk

Dan panggil fungsi pemprosesan

. Acara ini sering digunakan untuk melengkapkan reka letak responsif. window.innerWidth Lebar skrin semasa.

Ditambah:

acara pageshow

, acara ini

<script>
      window,addEventListener(&#39;resize&#39;,function(){
          console.log(window.innerWidth);
      })
     </script>

Salin selepas log masuk

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 ; >

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">

        </style>
        <script type="text/javascript">

        window.addEventListener(&#39;load&#39;, function() {
            var btn = document.querySelector(&#39;button&#39;);
            btn.addEventListener(&#39;click&#39;, function() {
                alert(&#39;点击我&#39;);
            })
        })

        window.addEventListener(&#39;load&#39;, function() {
 
            alert(22);
        })

        document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
                alert(33);
            })
    
        </script>
    </head>
    <body>    
        <button id = "btn1" >请点击</button>
        
    </body>
</html>

Salin selepas log masuk

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!