Fatal编程技术网
  • javascript/
  • Javascript window.onload与document.onload

Javascript window.onload与document.onload

javascript

Javascript window.onload与document.onload,javascript,event-handling,dom-events,Javascript,Event Handling,Dom Events,哪个更受广泛支持：window.onload或document.onload？何时启动？ 默认情况下，当整个页面加载时，会触发它，包括其内容（图像、CSS、脚本等） 在某些浏览器中，它现在接管了document.onload的角色，并在DOM就绪时触发 document.onload 当DOM准备就绪时调用它，可以在加载图像和其他外部内容之前 他们得到了多大程度的支持？ window.onload似乎是最广泛支持的。事实上，一些最现代的浏览器在某种意义上已经用window.onload

哪个更受广泛支持：
window.onload
或
document.onload
？

何时启动？

  • 默认情况下，当整个页面加载时，会触发它，包括其内容（图像、CSS、脚本等）
在某些浏览器中，它现在接管了
document.onload
的角色，并在DOM就绪时触发

document.onload

  • 当DOM准备就绪时调用它，可以在加载图像和其他外部内容之前
他们得到了多大程度的支持？ 
window.onload
似乎是最广泛支持的。事实上，一些最现代的浏览器在某种意义上已经用
window.onload
取代了
document.onload

浏览器支持问题很可能是许多人开始使用库（如）来检查文档是否准备就绪的原因，例如：

$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });
为了历史的目的<代码>窗口.onloadvs
body.onload
：

有一段时间也有人问过类似的问题 关于
window.onload
over
body.onload
的用法返回。这个 结果似乎是您应该使用
window.onload
，因为它是 把你的结构和动作分开很好

然而，它们通常是相同的。类似地，body.onload在IE中变为window.onload。

window.onload是标准的，但是-PS3中的web浏览器（基于Netfront）不支持window对象，因此，您不能在那里使用它。

一般的想法是，当文档的窗口准备好进行显示时，window.onload会触发，当DOM树（由文档中的标记代码构建）完成时，会触发document.onload

理想情况下，订阅允许通过Javascript进行屏幕外操作，几乎没有CPU负载。相反，当尚未请求、解析和加载多个外部资源时，
window.onload
可能需要一段时间才能启动

►测试场景：

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

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


window.tdiff=[]；fred=函数（a，b）{返回a-b；}；
window.document.onload=函数（e）{
console.log（“document.onload”，e，Date.now（），window.tdiff，
（window.tdiff[0]=Date.now（））和&window.tdiff.reduce（fred））；
}
window.onload=函数（e）{
console.log（“window.onload”，e，Date.now（），window.tdiff，
（window.tdiff[1]=Date.now（））和&window.tdiff.reduce（fred））；
}
►结果：

这是ChromeV20（可能是最新的浏览器）可以观察到的结果行为

  • 无
    文档。onload
    事件
  • onload
    在
    中声明时激发两次，在
    中声明时激发一次（事件随后充当
    文档.onload
    ）
  • 根据计数器的状态进行计数和操作可以模拟这两种事件行为
  • 或者在HTML-
    元素的范围内声明
    窗口.onload
    事件处理程序
►项目示例：

上面的代码取自代码库（
index.html
和
keyboader.js
）

有关的列表，请参阅MDN文档。

窗口。onload
和
onunload
是指向
document.body.onload
和
document.body.onunload

所有html标记上的
document.onload
和
onload
处理程序似乎都是保留的，但从未触发

在Chrome中，document->true中的“
onload
”，window.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>


函数bodyOnloadHandler（）{
console.log（“body onload”）；
}
window.onload=函数（e）{
控制台日志（“窗口加载”）；
};
页面内容在这里。
您将在Chrome控制台中看到“窗口加载”（首先出现）和“body onload”。但是，在Firefox和IE中只会看到“body onload”。如果在IE&FF的控制台中运行“
window.onload.toString（）
”，您将看到：

“函数onload（事件）{bodyOnloadHandler（）}”

这意味着赋值“window.onload=function（e）…”被覆盖。

添加事件侦听器

<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>
2 jQuery
祝你好运。根据

  • 浏览器解析HTML源代码并运行延迟脚本

  • 当所有HTML都被解析并运行后，
    DOMContentLoaded
    将在
    文档中调度。事件气泡显示到
    窗口
  • 浏览器加载延迟加载事件的资源（如图像）

  • 在
    窗口
    调度
    加载
    事件

    • 因此，执行顺序将是：

  • DOMContentLoaded
    捕获阶段
    窗口的事件侦听器
  • DOMContentLoaded
    文档的事件侦听器
  • DOMContentLoaded
    气泡阶段
    窗口的事件侦听器
  • window的
    load
    事件侦听器（包括
    onload
    事件处理程序）
    • 泡泡 
    window.addEventListener('load', function() {
    console.log('All assets are loaded')
})

    $(window).on('load', function() {
    console.log('All assets are loaded')
})