window.onload vs document.onload
哪个更广泛支持： window.onload或document.onload ？
在window.onload
他们什么时候开火？
在window.onload
- 默认情况下，整个页面加载时会触发它，包括其内容（图像，CSS，脚本等）
- 在某些浏览器中，它现在接pipedocument.onload的angular色，并在DOM准备就绪时触发。
document.onload
- 当DOM准备就绪时，可以在图像和其他外部内容加载之前调用它。
他们支持得如何？
window.onload似乎是最广泛的支持。 实际上，一些最现代的浏览器在某种意义上已经用window.onload代替了document.onload。 浏览器支持问题很可能是许多人开始使用jQuery等库来处理正在准备好的文档的检查的原因：
$(document).ready(function() { /* code here */ }); $(function() { /* code here */ });
为了历史的目的：
window.onload vs body.onload
值得一提的是，在编码论坛上 ，关于使用window.onload over body.onload问题，还有一个类似的问题。 结果似乎是，你应该使用window.onload，因为它是很好的分离你的结构与行动。
一般的想法是， window.onload当文档的窗口准备好呈现时触发 ， document.onload当DOM树 （由文档中的标记代码构build） 完成时触发 。
理想情况下，订阅DOM树事件 ，允许通过JavaScript进行离屏操作， 几乎不会导致CPU负载 。 相反，当多个外部资源尚未请求，parsing和加载时， window.onload可能需要一段时间才能触发 。
►testing场景：
为了观察所select的浏览器如何 实现上述事件处理程序 ，只需在您的文档的<body> – 标签中插入以下代码即可。
<script language="javascript"> window.tdiff = []; fred = function(a,b){return ab;}; 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事件。 - 一旦在
<head>内部声明（其中的事件就像document.onload），在<body>声明的onload会触发两次。 - 依靠计数器的状态进行计数和行为，可以模拟事件行为。
- 或者，在HTML-
<head>元素的范围内声明window.onload事件处理程序。
►示例项目：
上面的代码是从这个项目的代码库（ index.html和keyboarder.js ）中获取的。
有关窗口对象的事件处理程序的列表，请参阅MDN文档。
根据parsingHTML文件 – 最后 ，
-
浏览器parsingHTML源代码并运行延迟脚本。
-
当所有的HTML已被parsing并运行时，
DOMContentLoaded被分派到document。 事件冒泡到window。 -
浏览器加载延迟加载事件的资源（如图像）。
-
load事件在window分派。
因此，执行的顺序是
- 捕获阶段的
windowDOMContentLoaded事件侦听window -
documentDOMContentLoaded事件监听器 - 泡泡阶段的
windowDOMContentLoaded事件监听window -
load事件监听器（包括onload事件处理程序）的window
永远不要调用document的气泡load事件监听器（包括onload事件处理函数）。 只有捕获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 };
添加事件监听器
<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 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') })
祝你好运。
在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控制台中看到“窗口加载”（首先出现）和“body onload”。 但是，在Firefox和IE中，您只会看到“body onload”。 如果你在IE＆FF的控制台上运行“ window.onload.toString() ”，你会看到：
“function onload（event）{bodyOnloadHandler（）}”
这意味着赋值“window.onload = function（e）…”被覆盖。
但是window.onload往往是一样的东西。 同样的body.onload在IE中变成window.onload。
window.onload和onunload是document.body.onload和document.body.onunload快捷方式
所有的html标签document.onload和onload处理程序似乎是保留，但从未触发
在文档 – >真正的' onload '
Window.onload是标准的，但是 – PS3中的networking浏览器（基于Netfront）不支持窗口对象，所以你不能在那里使用它。
你也可能想看看提供了一个稳定的testing跨浏览器事件模型的jQuery 。
