jQuery 的 document ready 事件是模擬 W3C DOM 標準的 DOMContentLoaded 事件
全部的DOM元素下載完成後觸發。
因為不需等待圖檔載入完成，因此事件觸發的時間較早。
不會覆蓋，前一次跟後一次所設定的函式都會被執行。
有些時候，我們必須在網頁下載完成之後立即執行一些程式，
可能是想馬上顯示一些歡迎訊息等等。
以前是用 window.onload 來處理，
或是直接在 <body> 標籤上加入 onload 的事件處理函數，
範例：
$(document).ready(function() {
alert('Hi，歡迎歡迎~~');
});
你也可以這樣寫：
$(function() {
alert('Hi，歡迎歡迎~~');
});
先透過 $() 取得 document 物件，接著使用 ready() 帶入一個函數，
就可以在網頁下載完成後立即執行。
DOMContentLoaded 和 window.onlad 的差異在於：
一、觸發時機
DOMContentLoaded 是在 DOM 文件下載完成後觸發，
window.onlad 是文件和所有文件內的元件，包含圖檔等等全部下載完成後才會觸發，
因此通常 window.onload 的觸發時間要比 DOMContentLoaded 晚一點，
如果網頁內有一些圖檔，就差多了，有時候你執行的程式並不需要等所有圖檔都下載完成，才執行。
因此，放到 DOMContentLoaded 事件內處理是比較合適的。
二、函式覆蓋
DOMContentLoaded 不會覆蓋，前一次跟後一次所設定的函式都會被執行。
window.onlad 前一次設定給window.onload的函式會被後一次所設定的函式覆蓋。
三、寫法
DOMContentLoaded
$(document).ready(function() { alert('Hi，歡迎歡迎~~'); });
window.onlad
window.onload=function() { alert('Hi，歡迎歡迎~~'); };
沒有留言:
張貼留言