哪种支持更广泛?window.onload "还是 "document.onload"?
在某些浏览器中,它现在取代了document.onload
的作用,并在DOM准备好时启动。
document.onload
window.onload似乎是得到最广泛支持的。事实上,一些最新的浏览器在某种意义上已经用window.onload
取代了document.onload
。
浏览器的支持问题很可能是许多人开始使用jQuery等库来处理文档准备就绪的检查的原因,比如说。
$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });
就历史而言。window.onload
与body.onload
。
不久前在codingforums上也有一个类似的问题 关于 "window.onload "与 "body.onload "的用法。结果 结果似乎是,你应该使用
window.onload
,因为它是 将你的结构和动作分开是很好的。
一般来说,window.onload在文档的窗口准备好展示时,document.onload在DOM树(由文档中的标记代码构建)完成时。
理想情况下,订阅DOM树事件,可以通过Javascript进行离屏操作,招致几乎没有CPU负载。
相反,`window.onload
在多个外部资源尚未被请求、解析和加载的情况下,可能会花一段时间来启动。
►测试场景:
要观察两者之间的差异以及您所选择的浏览器如何实现上述事件处理程序,只需在您的文档's - lt;body>
- 标签中插入以下代码。
<script language="javascript">
window.tdiff = []; fred = function(a,b){return a-b;};
window.document.onload = function(e){
console.log("document.onload", e, Date.now() ,window.tdiff,
(window.tdiff[0] = Date.now()) && window.tdiff.reduce(fred) );
}
window.onload = function(e){
console.log("window.onload", e, Date.now() ,window.tdiff,
(window.tdiff[1] = Date.now()) && window.tdiff.reduce(fred) );
}
</script>
►结果:
以下是Chrome v20(可能还有大多数当前的浏览器)的行为。
document.onload
事件。onload`````在
lt;body>里面声明两次,在```lt;head>
里面声明一次(这里的事件就像```document.onload````)。lt;head>
元素的范围内声明window.onload
事件处理程序。►示例项目:。
以上代码取自[本项目's][2]代码库(index.html
和keyboarder.js
)。
关于[窗口对象的事件处理程序][3]的列表,请参考MDN文档。
1:
[2]: https://github.com/lsauer/KeyBoarder/tree/gh-pages [3]: https://developer.mozilla.org/en-US/docs/DOM/window#Event_handlers
添加事件监听器
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
// - Code to execute when all DOM content is loaded.
// - including fonts, images, etc.
});
</script>
window.addEventListener('load', function() {
console.log('All assets are loaded')
})
$(window).on('load', function() {
console.log('All assets are loaded')
})
<hr>。 好运。
根据[解析HTML文档--结束][1]。
浏览器解析HTML源并运行延迟脚本。
当所有的HTML都被解析并运行后,在 "document "处会派发一个 "DOMContentLoaded "事件。
该事件冒泡到window
。
浏览器加载资源(如图片),延迟加载事件。
在window
处派发一个load
事件。
因此,执行顺序将是
document
的DOMContentLoaded
事件监听器。
window
的DOMContentLoaded
事件监听器在气泡阶段。
"window "的 "load "事件监听器(包括 "onload "事件处理)。
"document "中的气泡 "load "事件监听器(包括 "onload "事件处理程序)绝对不能被调用,只有捕获 "load "监听器可能会被调用,但是是由于像样式表这样的子资源的加载,而不是由于文档本身的加载。
<!--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->
window.addEventListener('DOMContentLoaded', function() {
console.log('window - DOMContentLoaded - capture'); // 1st
}, true);
document.addEventListener('DOMContentLoaded', function() {
console.log('document - DOMContentLoaded - capture'); // 2nd
}, true);
document.addEventListener('DOMContentLoaded', function() {
console.log('document - DOMContentLoaded - bubble'); // 2nd
});
window.addEventListener('DOMContentLoaded', function() {
console.log('window - DOMContentLoaded - bubble'); // 3rd
});
window.addEventListener('load', function() {
console.log('window - load - capture'); // 4th
}, true);
document.addEventListener('load', function(e) {
/* Filter out load events not related to the document */
if(['style','script'].indexOf(e.target.tagName.toLowerCase()) < 0)
console.log('document - load - capture'); // DOES NOT HAPPEN
}, true);
document.addEventListener('load', function() {
console.log('document - load - bubble'); // DOES NOT HAPPEN
});
window.addEventListener('load', function() {
console.log('window - load - bubble'); // 4th
});
window.onload = function() {
console.log('window - onload'); // 4th
};
document.onload = function() {
console.log('document - onload'); // DOES NOT HAPPEN
};
在Chrome浏览器中,window.onload与<body onload="">
不同,而在Firefox(35.0版)和IE(11版)中它们是一样的。
你可以通过下面的代码段来探讨这个问题。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--import css here-->
<!--import js scripts here-->
<script language="javascript">
function bodyOnloadHandler() {
console.log("body onload");
}
window.onload = function(e) {
console.log("window loaded");
};
</script>
</head>
<body onload="bodyOnloadHandler()">
Page contents go here.
</body>
</html>
你会在 Chrome 控制台中看到 "window loaded"(先出现的) 和 "body onload"
和"body onload"。
然而,在Firefox和IE中,你将只看到"body onload"
在Firefox和IE中,你会看到只有"body onload"。
如果你在IE的控制台中运行"window.onload.toString()
"
在IE的控制台中运行&
FF,你会看到。
"function onload(event) { bodyOnloadHandler() }"
这意味着赋值"window.onload = function(e)..." 被覆盖。
window.onload
和onunload
是document.body.onload
和document.body.onunload
的快捷方式。
document.onload
和onload
处理程序在所有html标签上似乎是保留的,但从未被触发过。
'onload
'
in document ->
true