【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 5 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

關於網頁的載入事件

當瀏覽器完成網頁文件的載入之後,會觸發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-documentDOMContentLoaded
loadload 

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


沒有留言: