<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; 這樣才是正確的寫法。
<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都已經加載完成了。
如果你是個jQuery使用者，你可能會經常使用$(document).ready();或者$(function(){})，這都是使用了DOMContentLoaded事件。下面是官方解釋：
下面三個寫法是等價的：
除此之外，還需要注意的是：
//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"
在chrome下，結果為：
DOMContentLoaded
window.onload
bodyonload
然后，如果把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>
chrome和IE10、FireFox的結果竟然是一樣的：
DOMContentLoaded
window.onload
IE10、FireFox可以理解，window.onload和body中的onload誰在下面就是誰覆蓋誰，只會執行后面的那個。