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 ...
随机推荐
- [转]JavaScript快速检测浏览器对CSS3特性的支持
转自:https://yuguo.us/weblog/detect-css-support-in-browsers-with-javascript/ ------------------------- ...
- JS学习笔记--轮播图效果
希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...
- ios基础篇（二十八）—— UITableView的上拉加载
本文主要展示一个demo实现UITableView的上拉加载数据: 先看看效果图: 接着上拉,加载更多数据: 主要实现的效果是在我们上拉结束拖拽之后,开始加载数据,数据加载的过程中有滚动轮提示用户正在 ...
- appcan.slider.js探索
1:-moz代表firefox浏览器私有属性 -ms代表IE浏览器私有属性 -webkit代表chrome.safari私有属性 2:定义新模块:appcan.define(name,function ...
- java selenium (十一) 操作弹出对话框
Web 开发人员通常需要利用JavaScript弹出对话框来给用户一些信息提示, 包括以下几种类型 阅读目录 对话框类型 1. 警告框: 用于提示用户相关信息的验证结果, 错误或警告等 2. 提示框 ...
- F2工作流引擎这工作流引擎体系架构（二）
F2工作流体系架构概览图 为了能更好的了解F2工作流引擎的架构体系,花了些时间画了整个架构的体系图.F2工作流引擎遵循参考WFCM规范,目标是实现轻量级的工作流引擎,支持多种数据库及快速应用到任何基于 ...
- AutoHotkey(AHK)
这是2009年用过的一个软件,自动键盘执行的一个东西,能提高效率,代替人工击键和鼠标操作,现在中文化很好了,如下地址是中文文档 http://ahkcn.sourceforge.net/docs/Tu ...
- tweenmax.js 文档
TweenMax 参考http://bbs.9ria.com/thread-214959-1-1.html TweenMax 可能是很多人都用的,包括我 但 是最近发现大量的运用就总会产生这样或那样的 ...
- hadoop输入分片计算(Map Task个数的确定)
作业从JobClient端的submitJobInternal()方法提交作业的同时,调用InputFormat接口的getSplits()方法来创建split.默认是使用InputFormat的子类 ...
- 杭电1597--find the nth digit--假设：S1 = 1,S1=12,S3=123,S4=1234...
我是把它分层来求的,也就是说第一层是1,第二层是12,第三层是123......你们该懂的!! #include <iostream>#include <cmath>using ...