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

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

【相關推薦：、】

視窗頁面載入事件

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('resize',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事件；

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

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

        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);
            })
    
        </script>
    </head>
    <body>    
        <button id = "btn1" >請點選</button>
        
    </body>
</html>

執行情況；

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

然後這個；

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

HTML 的DOM querySelector()方法可以不需要額外的jQuery等支援，也可以方便的獲取DOM元素，語法跟jQuery類似；
querySelector() 方法僅僅返回匹配指定選擇器的第一個元素；

這個我也是第一次見；看上去沒錯；

【相關推薦：、】

以上就是JavaScript範例解析之window頁面載入事件的詳細內容，更多請關注TW511.COM其它相關文章！