window.onload vs document.onload

哪个得到更广泛的支持:window.onload或document.onload？

在window.onload

他们什么时候开火？

在window.onload

默认情况下,在整个页面加载时会触发它,包括其内容(图像,CSS,脚本等)

在某些浏览器中,它现在接管了document.onload的角色,并在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.onloadover的问题在编码论坛上提出了类似的问题document.onload.结果似乎是你应该使用window.onload,因为将结构与动作分开是很好的.

一般的想法是window.onload在文档的窗口准备好进行演示时触发,而document.onload在DOM树(从文档中的标记代码构建)完成时触发.

理想情况下,订阅DOM树事件,允许通过Javascript进行屏幕外操作,几乎不会产生CPU负载.相反,当尚未请求,解析和加载多个外部资源时,window.onload可能需要一段时间才能触发.

►测试场景:

要观察差异以及您选择的浏览器如何实现上述事件处理程序,只需在文档的- 标记中插入以下代码即可.

►Result:

以下是Chrome v20(可能是大多数当前浏览器)可观察到的结果行为.

没有document.onload事件.

onload在内部声明时触发两次,一次在内部声明时(事件发生的地方document.onload).

计数和行动取决于计数器的状态允许模拟两种事件行为.

或者window.onload在HTML 元素的范围内声明事件处理程序.

►示例项目:

上面的代码取自该项目的代码库(index.html和keyboarder.js).

有关窗口对象的事件处理程序列表,请参阅MDN文档.

添加事件监听器

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文档 - 结束,

浏览器解析HTML源并运行延迟脚本.

DOMContentLoaded在document解析并运行所有HTML时调度A. 事件起泡到了window.

浏览器加载延迟加载事件的资源(如图像).

一个load事件发送到window.

因此,执行顺序将是

DOMContentLoadedwindow捕获阶段的事件侦听器

DOMContentLoaded 事件听众 document

DOMContentLoadedwindow泡沫阶段的事件监听器

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
};

    
        
        
        

        
    

    

        Page contents go here.