window.onload、DOMContentLoaded和$(document).ready()
<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谁在下面就是谁覆盖谁，只会执行后面的那个。
window.onload、DOMContentLoaded和$(document).ready()的更多相关文章
- JS window.onload 和模拟document.ready.
hhhhhhhhhhhhhhhh hhhhhhhhhhhhhhhh ttttttttttttt 注意观察 事件执行的 先后顺序. 总的来说,window.onload()方法是必须等到页面内包括图片的 ...
- jQuery的$(window).load与、(document).ready和window.onload的关系
jQuery的$(window).load与.(document).ready和window.onload的关系 $(function() { console.log('document.ready ...
- $(document).ready和window.onload,细微小区别,ready是jQuery的方法,onload是window的方法
$(document).ready和window.onload的区别 $(document).ready和window.onload都是在都是在页面加载完执行的函数,大多数情况下差别不大,但也是有区别 ...
- 【Python全栈-JavaScript】JavaScript的window.onload()与jQuery 的ready()的区别
JavaScript的window.onload()与jQuery 的ready()的区别 做web开发时常用Jquery中$(document).ready()和JavaScript中的window ...
- JavaScript window.onload 事件和 jQuery ready 函数有何不同？
JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是,前者除了要等待 DOM 被创建还要等到包括大型图片.音频.视频在内的所有外部资源都完全加载.如 ...
- Onload,Onunload,onbeforeunload,$(window).load(function() {})和$(document).ready(function(){})
Onload,$(window).load(function() {}):元素都加载完毕,才可以执行. $(document).ready(function(){}):不一定要等所有的js和图片加载完 ...
- $(window).load(function() {})和$(document).ready(function(){})的区别
JavaScript 中的以下代码 : Window.onload = function (){// 代码 } 等价于 Jquery 代码如下: $(window).load(function ( ...
- 比较body.onload(function())、$(document).ready(function())与$(windows).load(function)
原理对比: body.onload(function())是优先将document的DOM渲染,即将页面所有的元素(包括html标签以及所引用到的图片,flash媒体等媒体文件)加载完成,然后再执行页 ...
- $(window).load(function(){})跟$(document).ready(function(){})跟$(function(){})区别
1.页面DOM加载完成 2.$(document).ready(function(){}) 的简写是 $(function(){}) 执行 3.图片样式等所有HTML元素加载完毕 4.$(windo ...
随机推荐
- ef join 用法
var customers = DB.Customer.Join(DB.Commission, cst => cst.CommissionId, ...
- bcd-ascii相互转换函数
// BCD转ASCII int Asc2Bcd(unsigned char *input, unsigned int inputLen, unsigned char *output) { unsig ...
- Install Atom editor in ubuntu 14.04
Step 1: Add repository sudo add-apt-repository ppa:webupd8team/atom Step 2: Update the repository su ...
- CSS各类标签用法——选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 移动端WEB开发备忘录
META相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题" ...
- SpringMVC 数据转换 & 数据格式化 & 数据校验
数据绑定流程 1. Spring MVC 主框架将 ServletRequest 对象及目标方法的入参实例传递给 WebDataBinderFactory 实例,以创建 DataBinder 实例对象 ...
- 多线程下的for循环问题
List<int> _ValueLis = new List<int>(); private void AddInt(int i) { _ValueLis.Add(i); } ...
- C# 多线程限制方法调用（monitor）
多线程执行方法 改方法没有执行完时 别的方法不能调用次方法.用循环执行一个方法可以需要一分钟 在这一分钟只内任何 成员都不能再调用该方法. class MonitorSample { ; //生产者和 ...
- SQL IF ELSE
if (条件) begin (执行模块) endelse if (条件) begin (执行模块) endelse begin ...
- JS技术大全
事件源对象:event.srcElement.tagName event.srcElement.type 捕获/释放:event.srcElement.setCapture(); event.sr ...