JS window.onload 用法与文档答案

【问题标题】：JS window.onload Usage Vs DocumentJS window.onload 用法与文档
【发布时间】：2018-03-12 01:24:00
【问题描述】：

window.onload 从我的阅读中听起来它可以与document.onload 松散地互换，但我的经验表明这是不正确的。我继承了一个 JS 脚本，但我不知道如何更正它。我希望 JS 在加载 DOM 后执行，而不是在加载所有资源后执行。我该怎么做？

目前我有：

window.onload = initDropMenu;

我试过了：

 document.onload = initDropMenu;

这只会导致菜单无法加载。我还尝试从 JS 中完全删除该行，并让 DOM 通过以下方式执行它：

<body onload="initDropMenu()">

这也导致没有菜单，并且控制台中没有错误。我的JS知识有限，我在这里缺少什么？

【问题讨论】：

我从未听说过document.onload。但是<body onload=...> 应该可以工作，它相当于window.onload。
<body onload=...> 导致没有菜单，并且控制台中没有错误。我也从未听说过document.onload，但我的阅读让我相信它存在，stackoverflow.com/questions/588040/…... 或者我误读了该线程及其用法？
可能使用developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
@Barmar stackoverflow.com/a/588048/4333555 暗示document.onload 可以与window.onload 互换使用.. 或者通过我的阅读。不过，@williamflemming 的评论让我找到了一个可行的答案。我对 JS 的了解还不够，但不能说解决方案是否有效。我原以为不需要创建自己的事件侦听器。我目前的解决方案是document.addEventListener("DOMContentLoaded", function(event) {....。
我认为这个答案混淆了document.onload 和document.onDOMContentLoaded。请注意，它没有document.onload 的链接，就像window.onload 一样。

标签： javascript dom document-ready

【解决方案1】：

在窗口上加载事件：

加载事件在文档加载过程结束时触发。在此时，文档中的所有对象都在 DOM 中，并且 all 图片、脚本、链接和子框架已完成加载。
[来源：developer.mozilla.org]

    <script>
       window.onload = function(){ init(); };
    </script>

HTML 元素上的加载事件：

load 事件在资源及其依赖项时触发资源已完成加载。
[来源：developer.mozilla.org]

    <!-- When the image is loaded completely -->
    <img onload="image_loaded()" src="w3javascript.gif">

    <!-- When the frame is loaded completely (including all resources) -->
    <iframe onload="frame_loaded()" src="about.html">

    <!-- When body loaded completely (including all resources, images and iframes) -->
    <body onload="init()">

很多论坛甚至本站的一些答案都可能误导你，但是body元素上的load事件不仅等同于窗口上的load事件，它是完全相同的事件。以下引用澄清了这一点。

由于历史原因，<body> 和 <frameset> 元素实际上在其父窗口上设置了事件处理程序目的。（HTML 规范将这些命名为：onblur、onerror、onfocus、 onload，onscroll。）
[来源：developer.mozilla.org]

DOMContentLoaded 事件：

开发人员应该使用的是DOMContentLoaded 文档上的事件。它在 html 完全加载和解析时触发。

    document.addEventListener("DOMContentLoaded", function(event) {
        alert("Document is ready");
    });

当初始 HTML 文档具有完全加载和解析，无需等待样式表，图像和子帧以完成加载。非常不同的事件负载应该只用于检测完全加载的页面。这是一个令人难以置信的使用负载的常见错误 DOMContentLoaded 会更多合适，所以要小心。
[来源：developer.mozilla.org]

也许这是关于这个主题的唯一答案，有适当的参考

【讨论】：

将函数设置为window.onload 仅允许在窗口加载时发生一件事（无论您在该函数中定义什么），而 addEventListener 允许触发任意数量的订阅加载的事物事件。是否有可能有其他代码使用window.onload=function()，它是在您的菜单代码之后定义的，这样您的菜单代码就会被覆盖？使用 window.onload 而不是事件监听器是很常见的做法：jsBin example
解释是，没有什么叫document.onload。您必须使用 DOMContentLoaded 事件来实现您想要做的事情。询问您是否需要更多说明。
正文onload是window.onload的别名。它在所有资源完全加载时触发，domcontentloaded 在仅加载 html 时触发。