你如何確定load和DOMContentLoaded事件的觸發順序？

爲什麼下面的代碼（JS Bin）以1，5，3，4的順序點亮？爲什麼2不開火？你如何確定load和DOMContentLoaded事件的觸發順序？

根據the answer to this question，「4」應該在「5」之前發射。這不是警報順序所顯示的。但是，如果我更改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>

來源

2014-10-10 Zack Gao

窗口/身體onload在所有圖像加載後觸發。

從MDN window.onload

在文檔加載過程結束時的負載事件觸發。在這一點上，文檔中的所有對象都在DOM中，並且所有圖像，腳本，鏈接和子幀都已完成加載。

因此，窗口加載應該在圖像加載之後發生。

和窗口/身體活動是triggeed順序取決於當你註冊的事件監聽器上

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

會導致

「頭 - DOMContentLoaded」
「END - DOMContentLoaded」
「IMG ONLOAD」
「head - window load」
「BODY ONLOAD」
「END - 窗口負荷」

JSBin

而且並不是所有的瀏覽器都支持document.load。

來源

2014-10-10 15:50:28 epascarello

嗨，Eric，謝謝你的徹底例子。我理解這裏的邏輯，但仍令我困惑的是，如果我將console.log或alert更改爲document.write，則執行順序似乎會改變。這是因爲如果我將一個document.write粘貼到img onload處理程序中，那麼它會重寫該文檔並銷燬所有其他處理程序？ – 2014-10-10 17:53:42

alert是一個「阻塞」事件，它將阻止執行線程，這將改變事情的行爲。這就是爲什麼人們建議不要使用警報進行調試。 – epascarello 2014-10-10 19:25:25

你如何確定load和DOMContentLoaded事件的觸發順序？

回答

相關問題