body onload 函数在我的示例（JavaScript）中不起作用答案

【问题标题】：body onload function is not working in my Example (JavaScript)body onload 函数在我的示例（JavaScript）中不起作用
【发布时间】：2021-02-14 19:26:55
【问题描述】：

我正在编写一个程序来查找 document.ready、window.onload、body.onload 的执行顺序，但由于某种原因，我的 body.onload 没有给出 console.log。为什么？

$(document).ready(function(){
    console.log('document is ready now ...');
});

window.onload = () => {
    console.log('window is loaded...');
}

function bodyOnload() {
    console.log('body is loaded...');
}

<html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body onload="bodyOnload()">

<h1>Hello ...</h1>

</body>

</html>

【问题讨论】：

这能回答你的问题吗？ will HTML <body> onLoad events overwrite javascript window onload event?
是的，我认为这个链接是正确的答案。
正确答案比较复杂。当您在body 中使用addEventListener 将负载侦听器附加到body 时，它永远不会运行。 DOMContentLoaded 监听器总是首先被触发，按照附加的顺序，然后在head 中设置一个window.load 监听器，然后在标签中设置body.onload，最后在body 的末尾设置window.load .事件在 Firefox 82 中按此顺序触发，但如果在脚本中添加 defer/async 属性，则顺序可能会混乱。请注意，这必须在一个简单的页面上进行测试，您不能使用框架或像 JSFiddle 这样的脚本宿主。

标签： javascript html jquery ecmascript-6

【解决方案1】：

我会用一些例子告诉你原因......

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        console.log('document is ready now ...');
    });

    window.onload = () => {
        console.log('window is loaded...');
    }

    function bodyOnload() {
        console.log('body is loaded...');
    }
</script>
</head>
<body onload="bodyOnload()">
<h1>Hello ...</h1>
</body>
</html>

如您所见，window.onload 在上述情况下不起作用。但是在下面的例子中，你可以看到 body.onload 不起作用。

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body onload="bodyOnload()">
<h1>Hello ...</h1>
<script>
    $(document).ready(function(){
        console.log('document is ready now ...');
    });

    window.onload = () => {
        console.log('window is loaded...');
    }

    function bodyOnload() {
        console.log('body is loaded...');
    }
</script>
</body>
</html>

因此，即使您单独编写它也无法正常工作。总的来说，它们不能一起工作。为什么？ window.onload 表示主体已经加载，body.onload 也表示窗口已经加载。因为这个原因，如果两者中的一个被调用，另一个将被忽略。

【讨论】：