window.onload、DOMContentLoaded和$(document).ready()

時間 2019-11-16

標籤 window.onload window onload domcontentloaded document ready 欄目 JavaScript 简体版

原文原文鏈接

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery2.js"></script>
    <script language="javascript">
        window.onload = haha();
        function haha(){console.log(document.getElementById("div1"));}
    </script>
</head>
<body>
    <div id="div1">a</div>
</body>
</html>

執行結果是null。window.onload = haha(); 這樣寫是錯誤的，不須要加括號，引用不用加括號，加了括號就成了函數返回值了，在頁面還沒加載完就執行了，固然是null。window.onload = haha; 這樣纔是正確的寫法。javascript

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery2.js"></script>
    <script language="javascript">
        window.onload = haha;
        function haha(){console.log(document.getElementById("div1"));}

        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }
    </script>
</head>
<body>
    <div id="div1">a</div>
</body>
</html>

在chrome、IE10和FireFox親測，執行結果是：DOMContentLoaded而後纔是onload的輸出。因此說通常狀況下，DOMContentLoaded事件要在window.onload以前執行，當DOM樹構建完成的時候就會執行DOMContentLoaded事件。當window.onload事件觸發時，頁面上全部的DOM，樣式表，腳本，圖片，flash都已經加載完成了。html

若是你是個jQuery使用者，你可能會常常使用$(document).ready();或者$(function(){})，這都是使用了DOMContentLoaded事件。下面是官方解釋：java

下面三個寫法是等價的：jquery

除此以外，還須要注意的是：chrome

//window.onload不能同時編寫多個。
//如下代碼沒法正確執行，結果只輸出第二個。
window.onload = function(){
  alert("test1");
};

window.onload = function(){
  alert("test2");
};

//$(document).ready()能同時編寫多個
//結果兩次都輸出
$(document).ready(function(){ 
   alert("Hello World"); 
}); 
$(document).ready(function(){ 
   alert("Hello again"); 
});

下面咱們再討論並測試下window.onload和body中onload：函數

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script language="javascript">
        window.onload = haha;
        function haha(){console.log("window.onload");}

        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }</script>
</head>
<body onload="console.log('bodyonload');">
        <div id="div1">a</div>
</body>
</html>

在IE10和FireFox下，結果爲：說明body中的onload會覆蓋window.onload測試

"DOMContentLoaded"
"bodyonload"ui

在chrome下，結果爲：spa

DOMContentLoaded
window.onload
bodyonload code

而後，若是把javascript代碼移到最下面，結果又會是什麼樣呢？

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
</head>
<body onload="console.log('bodyonload');">
        <div id="div1">a</div>
</body>
</html>
<script language="javascript">
    window.onload = haha;
    function haha(){console.log("window.onload");}

    if(document.addEventListener){
        function DOMContentLoaded(){
            console.log("DOMContentLoaded");
        }
        document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
    }
</script>