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

执行结果是null。window.onload = haha(); 这样写是错误的,不需要加括号,引用不用加括号,加了括号就成了函数返回值了,在页面还没加载完就执行了,当然是null。window.onload = haha; 这样才是正确的写法。

haha; ));} if(document.addEventListener){ DOMContentLoaded(){ console.log(DOMContentLoaded); } document.addEventListener( ,DOMContentLoaded,false ); } >

在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:

="http://code.jquery.com/jquery-1.9.0.js" haha(){console.log(window.onload);} DOMContentLoaded(){ console.log( ); }body onload="console.log('bodyonload');"> >

在IE10和FireFox下,结果为 :说明body中的onload会覆盖window.onload

"DOMContentLoaded"
"bodyonload"

在chrome下,结果为:

DOMContentLoaded
window.onload
bodyonload

然后,如果把javascript代码移到最下面,结果又会是什么样呢?

window.onload haha; haha(){console.log();} if(document.addEventListener){ DOMContentLoaded(){ console.log(); } document.addEventListener( ); } >

chrome和IE10、FireFox的结果竟然是一样的:

DOMContentLoaded
window.onload

IE 10、Fire Fox可以理解,window.on load和body中的 on load 谁在下面就是谁覆盖谁,只会执行后面的那个