<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谁在下面就是谁覆盖谁,只会执行后面的那个。
相关推荐
脱离document.onload和window.onload的onload事件,可多次添加加载事件!
window.onload insertAfter()
主要介绍了windows.onload()与$(document).ready()的区别
window.onload = function () { console.log('window.onload 方式执行') } $(document).ready(function () { console.log('$(document).ready(function(){}) 方式执行') })
<!...<html xmlns="http://www.w3.org/1999/xhtml" > function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) ... scrW = window.innerWidth ...<body onload="main();"> </html>
网上普遍的说法是$(document).ready()是在页面DOM解析完成后执行,而onload事件是在所有资源都准备完成之后才执行,也就是说$(document).ready()是要在onload之前执行的,尤其当页面图片较大较多的时候,这个时间差...
常见的方法有使用window.onload和jQuery的(document).ready两种。其中,window.onload方法是页面所有资源加载完成之后触发,因此性能较差;(document).ready方法是在页面dom元素加载完成之后触发,性能较好。 总体...
window.onload与$(function(){})区别包括页面所有的图片加载完成才会回调(晚)只能有一个监听回调页面加载完成就回调(早)可以有多个监听。
$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法 接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里. 对于Body的Onload事件...
有需要的朋友是最好的参考资料。希望有所帮助!
我们知道,在javascript中用来执行页面加载中的操作时候,我们会使用windows.onload=function(){}或者windows.onload=函数名(),也可以在body中调用onload事件调用方法即可,在jQuery中也有相当的代码
可能你也碰到过这种情况,就是在js的代码中用了[removed]后,可能会影响到body中的onload事件。你可以全写在body中,也可以全放到... 代码如下: if (document.all){ window.attachEvent(‘onload’,函数名)//IE中 } els
window.onload = function() { var myShakeEvent = new Shake({ threshold: 15 }); myShakeEvent.start(); window.addEventListener('shake', shakeEventDidOccur, false); function ...
topmsg.left=pageXOffset+window.innerWidth/2-topmsg.document.width/2 topmsg.top=pageYOffset+window.innerHeight-topmsg.document.height-5 setTimeout("logoit2()",90) } function setmessage(){ document.all...
资源名称:15天漫游jQuery中文翻译 word版内容简介:15天漫游jQuery中译本,不是很完整,但是也是学习jquery 不可或缺的东东1 day Window.onload() 一直是常用的javascript函数。数年来程序员们习惯了通过它在...
selenium会弹出网页窗口,因为它重写了window.open在文件selenium-browserbot.js函数BrowserBot.prototype.modifyWindowToRecordPopUpDialogs中的newOpen,但这必须在window.onload之后创建才有效。对于HTTPS安全性...
由于javascript内核比较老旧(相当于IE7)且非html文档,编写生成器时压注意,比如不支持JSON对象、不支持window.onload、不支持document等; PostMan功能可简单请求接口并生成C#请求代码,帮助类可在“帮助类”...
腾迅Web前端开发工程师笔试题及答案 ...function elementName(evt){ evt = evt|| window.... window.onload = function(){ var el = document.getElementsByTagName('body'); el[0].onclick = elementName; } ......