Chr*_*nce 651 javascript dom-events
哪个得到更广泛的支持:window.onload或document.onload？
Jos*_*ein 665
他们什么时候开火？
document.onload
它们的支持程度如何？
window.onload似乎是最广泛支持的.实际上,一些最现代的浏览器在某种意义上用window.onload替换了document.onload.浏览器支持问题很可能是许多人开始使用诸如jQuery之类的库来处理文档准备就绪的原因,如下所示:
$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });
出于历史的目的:
window.onload vs body.onload
作为一个注释,一段时间以来关于使用window.onloadover的问题在编码论坛上提出了类似的问题document.onload.结果似乎是你应该使用window.onload,因为将结构与动作分开是很好的.
Lor*_*uer 262
一般的想法是window.onload在文档的窗口准备好进行演示时触发,而document.onload在DOM树(从文档中的标记代码构建)完成时触发.
理想情况下,订阅DOM树事件,允许通过Javascript进行屏幕外操作,几乎不会产生CPU负载.相反,当尚未请求,解析和加载多个外部资源时,window.onload可能需要一段时间才能触发.
►测试场景:
要观察差异以及您选择的浏览器如何实现上述事件处理程序,只需在文档的<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>
►Result:
以下是Chrome v20(可能是大多数当前浏览器)可观察到的结果行为.
document.onload事件.onload在内部声明时触发两次<body>,一次在内部声明时<head>(事件发生的地方document.onload).window.onload在HTML <head>元素的范围内声明事件处理程序.►示例项目:
上面的代码取自该项目的代码库(index.html和keyboarder.js).
Aka*_*ash 118
添加事件监听器
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
// - Code to execute when all DOM content is loaded.
// - including fonts, images, etc.
});
</script>
Update March 2017window.addEventListener('load', function() {
console.log('All assets are loaded')
})
$(window).on('load', function() {
console.log('All assets are loaded')
})
Ori*_*iol 67
浏览器解析HTML源并运行延迟脚本.
DOMContentLoaded在document解析并运行所有HTML时调度A. 事件起泡到了window.
浏览器加载延迟加载事件的资源(如图像).
一个load事件发送到window.
因此,执行顺序将是
DOMContentLoadedwindow捕获阶段的事件侦听器DOMContentLoaded 事件听众 documentDOMContentLoadedwindow泡沫阶段的事件监听器load事件监听器(包括onload事件处理程序)window永远不应该调用bubble load事件侦听器(包括onload事件处理程序)document.load可能只调用捕获侦听器,但由于加载了样式表之类的子资源,而不是由于文档本身的负载.
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
};Vin*_*ANG 12
在Chrome中,window.onload <body onload="">与Firefox 不同,但在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控制台中看到"窗口加载"(首先出现)和"正在加载".但是,您将在Firefox和IE中看到"body onload".如果你window.onload.toString()在IE和FF的控制台中运行" ",你会看到:
"function onload(event){bodyOnloadHandler()}"
这意味着赋值"window.onload = function(e)..."被覆盖.
简而言之
window.onloadIE 6-8 不支持document.onload任何现代浏览器都不支持（事件永远不会被触发）window.onload = () => console.log('window.onload works'); // fired
document.onload = () => console.log('document.onload works'); // not firedwindow.onload并onunload有快捷键document.body.onload和document.body.onunload
document.onload并且onload所有html标签上的处理程序似乎都被保留但从未触发过
' onload'在文档中 - >是的
| 归档时间： |
|
| 查看次数： |
1647877 次 |
| 最近记录： |