關於網頁的載入事件

當瀏覽器完成網頁文件的載入之後，會觸發load事件，以下的程式片段示範load事件處理器的註冊。

window.onload = function () {

    //網頁完成載入，執行特定動作 …

};

其中的事件處理器函式，會在網頁載入完成之後執行，你可以將要執行的程式碼配置於此函式當中。考慮以下的程式碼：

<script>

        window.onload = function () {

            document.getElementById('msg').innerHTML =

'網頁文件載入完成 !';          

        };

 </script>

其中透過 window 物件註冊 load 事件處理器，於且取得畫面上的 msg 元素，顯示預定的訊息。網頁由上往下載入瀏覽器，未完成載入的內容元素，並沒有辦法進行存取，因此若是要在網頁完成載入並進行操作之前執行網頁內容的初始化動作，便需要在 load 事件處理器裏面作處理。當然，你可以將函式內容程式碼移至 body 尾端結束標籤前，如此一來可以達到相同的效果。

與網頁載入有關的另外一個事件是 DOMContentLoaded ，當網頁文件完全載入並完成解析，其它外部資源未載入時，DOMContentLoaded事件會被觸發，它觸發的時機點在 load 事件之前，考慮以下的程式碼：

    <script>

        window.addEventListener('DOMContentLoaded', function (e) {         

            console.log('DOMContentLoaded-document：' + e.type);

        }, false);     

        window.addEventListener('load', function (e) {          

            console.log('load：' + e.type);

        }, false);

    </script>

其中註冊 DOMContentLoaded 與load事件，在瀏覽器完成網頁的載入與解析之後，輸出以下的結果：

DOMContentLoaded-document：DOMContentLoaded

load：load 

由於 DOMContentLoaded 事件在網頁完成解析之後便觸發，因此其事件處理器會先執行，而 load 事件則於所有外部資源完成載入之後才會被觸發，相關訊息緊接著輸出。