JavaScript實例解析之window頁面載入事件

這篇文章為大家帶來了關於javascript的相關知識，其中主要介紹了window視窗事件，window.onload是視窗（頁面）載入事件，當文件內容完全載入完成後才會觸發該事件，下面一起來看一下，希望對大家有幫助。

【相關推薦：javascript影片教學、web前端】

##」視窗頁面加載事件

window.
onload
 = function() {}或者 window.addEventListener('
load
', function() {});

window.onload是視窗（頁面）載入事件，當

文件內容完全載入完成後才會觸發該事件（包括圖片、腳本檔案、CSS檔案等）。

注意：

• #有了window.onload就可以把js程式碼寫到頁面元素的上方，因為onload是等頁面內容全部加載完畢，再去執行處理函數；

• #window.onload傳統註冊方式只能寫一次，如果有多個，就會以最後一個window.onload為準。

• 而用window.addEventListener('load', function() { })則沒有限制。

document.addEventListener(
'DOMContentLoaded'
, function() { })

DOMContentLoaded事件觸發時，僅

當DOM載入完成，不包括樣式表、圖片、flash等等。

如果頁面的圖片很多的話，從使用者造訪到onload觸發可能需要較長的時間，互動效果就不能實現，必然影響使用者的體驗，此時用

DOMContentLoaded比較合適。

調整視窗大小的事件

window.onresize = funtion(){}
window.addEventListener("resize",funtion(){});

window.onresize是調整視窗大小的載入事件，只要

視窗大小發生像素變化時就會觸發並調用的處理函數。經常利用這個事件完成響應式佈局。

window.innerWidth目前螢幕的寬度。

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

補充：

pageshow事件，這個事件在頁面顯示時觸發，無論頁面是否來自快取。在重新載入的頁面中，pageshow會在load事件觸發後觸發；

根據事件物件中的 persisted 來判斷是否為快取中的頁面觸發的pageshow事件。

範例如下：

window.onload是視窗(頁面)載入事件,當文件內容完全載入完成會觸發該事件(包括圖片、腳本檔、CSS檔案等),就調用的處理函數；

有了window.onload就可以把JS程式碼寫到頁面元素的上方,因為onload是等頁面內容全部載入完畢,再去執行處理函數;

window.onload傳統註冊事件方式只能寫一次,如果有多個,會以最後-個window.onload為準；

如果使用addEventListener則沒有限制；

DOMContentLoaded事件觸發時,僅當DOM載入完成,不包括樣式表,圖片, flash等；

le9以上才支援;

如果頁面的圖片很多的話，從使用者造訪到onload觸發可能需要較長的時間，可用DOMContentl oaded事件；

nbsp;html>

    
        <meta>
        <title></title>
        <style>

        </style>
        <script>

        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>
    
        
        <button>请点击</button>
        
    

運行情況；

    先彈出這個；這是DOM載入完成彈的；

 

然後這個;

 

點擊按鈕彈這個；因為程式碼是用addEventListener註冊的載入事件；

 

HTML 的DOM querySelector()方法可以不需要額外的jQuery等支持，也可以方便的獲取DOM元素，語法跟jQuery類似；

querySelector() 方法僅僅返回符合指定選擇器的第一個元素； 

這個我也是第一次見；看起來沒錯；

【相關推薦：

javascript影片教學、web前端】

以上是JavaScript實例解析之window頁面載入事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！