Question

为什么下面的代码（JS Bin）按照1,5,3,4的顺序触发？为什么2根本不发射？

根据the answer to this question，＆＃34; 4＆＃34;应该在＆＃34; 5＆＃34;之前开火。这不是警报顺序所显示的内容。但是，如果我更改body和img onload处理程序以执行document.write而不是alert，那么将显示5，这与该答案一致。

<!DOCTYPE html>
<html>
    <head>
      <script>
        document.addEventListener("DOMContentLoaded", function() {
          alert("1");
        });
        document.addEventListener("load", function() {
          alert("2");
        });
        window.addEventListener("load", function() {
          alert("3");
        });
      </script>
    </head>
    <body onload="alert('4')">
        <h1>Hello World!</h1>
        <img onload="alert('5')" src="https://developer.cdn.mozilla.net/media/redesign/img/logo_sprite.svg?2014-01" alt="Smiley face" width="42" height="42" />
    </body>
</html>

Answer 1

加载完所有图像后，

窗口/正文onload将触发。

来自MDN window.onload

加载事件在文档加载过程结束时触发。在至此，文档中的所有对象都在DOM中，而且都是图像，脚本，链接和子框架已完成加载。

因此窗口加载应该在图像加载被触发后出现。

触发窗口/身体事件的顺序取决于您何时注册事件监听器

<!DOCTYPE html>
<html>
    <head>
      <script>
        document.addEventListener("DOMContentLoaded", function() {
          console.log("Head - DOMContentLoaded");
        });
        document.addEventListener("load", function() {
          console.log("head - document load");
        });
        window.addEventListener("load", function() {
          console.log("head - window load");
        });
      </script>
    </head>
    <body onload="console.log('BODY ONLOAD')">
        <h1>Hello World!</h1>
        <img onload="console.log('IMG ONLOAD')" src="https://developer.cdn.mozilla.net/media/redesign/img/logo_sprite.svg?2014-01" alt="Smiley face" width="42" height="42" />

      <script>
        document.addEventListener("DOMContentLoaded", function() {
          console.log("END - DOMContentLoaded");
        });
        document.addEventListener("load", function() {
          console.log("END - document load");
        });
        window.addEventListener("load", function() {
          console.log("END - window load");
        });
      </script>      
    </body>
</html>

会导致

“Head - DOMContentLoaded”
“END - DOMContentLoaded”
“IMG ONLOAD”
“head - window load”
“BODY ONLOAD”
“END - 窗口加载”

JSBin

并非所有浏览器都支持document.load。

如何确定加载和DOMContentLoaded事件的触发顺序？

1 个答案: