哪个得到更广泛的支持：window.onload或document.onload？
window.onload 与 document.onload
IT技术
javascript
event-handling
dom-events
2021-01-08 22:55:22
6个回答
他们什么时候开火？
- 默认情况下，它会在整个页面加载时触发，包括其内容（图像、CSS、脚本等）。
在某些浏览器中，它现在接管了document.onloadDOM的作用并在 DOM 准备就绪时触发。
document.onload
- 当 DOM 准备好时调用它，这可以在加载图像和其他外部内容之前调用。
他们的支持情况如何？
window.onload似乎是最广泛支持的。事实上，一些最现代的浏览器都在某种意义上取代document.onload用window.onload。
浏览器支持问题很可能是许多人开始使用诸如jQuery 之类的库来处理文档准备就绪检查的原因，如下所示：
$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });
为了历史的目的。window.onload对比body.onload：
不久前，在codingforums上也有人问过一个关于
window.onloadover使用的类似问题body.onload。结果似乎是您应该使用，window.onload因为将您的结构与动作分开是很好的。
一般的想法是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>
►结果：
这是由此产生的行为，可观察到 Chrome v20（可能还有大多数当前浏览器）。
- 没有
document.onload活动。 onload在 中声明时触发两次，在 中声明时触发<body>一次<head>（事件随后充当document.onload）。- 根据计数器的状态进行计数和操作允许模拟两种事件行为。
- 或者
window.onload，在 HTML-<head>元素的范围内声明事件处理程序。
►示例项目：
上面的代码取自该项目的代码库（index.html和keyboarder.js）。
添加事件监听器
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
/*
- Code to execute when only the HTML document is loaded.
- This doesn't wait for stylesheets,
images, and subframes to finish loading.
*/
});
</script>
Update March 2017
1 原生 JavaScript
window.addEventListener('load', function() {
console.log('All assets are loaded')
})
2 jQuery
$(window).on('load', function() {
console.log('All assets are loaded')
})
祝你好运。
浏览器解析 HTML 源代码并运行延迟脚本。
A在所有 HTML 都已解析并运行后
DOMContentLoaded分派document。事件冒泡到window。浏览器加载延迟加载事件的资源（如图像）。
在
load分派一个事件window。
因此，执行顺序将是
DOMContentLoadedwindow捕获阶段的事件侦听器DOMContentLoaded的事件监听器documentDOMContentLoadedwindow冒泡阶段的事件监听器load的事件侦听器（包括onload事件处理程序）window
永远不应该调用气泡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
};在 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 控制台中看到“窗口加载”（首先出现）和“主体加载”。但是，您在 Firefox 和 IE 中只会看到“body onload”。如果你window.onload.toString()在 IE & FF 的控制台中运行“ ”，你会看到：
“函数 onload(event) { bodyOnloadHandler() }”
这意味着分配“window.onload = function(e)...”被覆盖。