瀏覽器Document Ready事件捕獲策略

Document Ready event的觸發點是在是頁面的DOM結構加載完畢以後，頁面顯示以前，與window對象的onload事件不一樣，document ready事件不須要等待其餘外部資源加載完畢。所以多數Javascript框架和頁面的交互代碼選擇在document ready事件觸發時執行。

1. W3C DOM標準策略

W3C DOM標準定義了DOMContentLoaded事件，這個事件在DOM結構加載完畢後當即觸發，所以支持W3C DOM標準的瀏覽器能夠直接綁定DOMContentLoaded事件，包括IE9+和近代版本的Firefox、Chrome、Safari和Opera。

var domLoadedHandler = function () {
    // 執行代碼
    // ...
     
    // 解除事件
    document.removeEventListener("DOMContentLoaded", domLoadedHandler, false);
};
 
// 綁定事件
document.addEventListener("DOMContentLoaded", domLoadedHandler, false);
2. IE策略

IE8及之前的版本，不支持DOMContentLoaded事件，一般的策略是檢查document的onreadystatechange事件。onreadystatechange事件在DOM的readystate發生變化時觸發，當readystate爲"complete"時，表示文檔內容加載完畢。

var domLoadedHandle = function () {
    if (document.readystate === "complete") {
        // 執行代碼
        //...
         
        // 解除事件
        document.detachEvent("onreadystatechange", domLoadedHandle);
    }
     
};
 
// 綁定事件
document.attachEvent("onreadystatechange", domLoadedHandle);
document的onreadystatechange事件觸發(complete)老是在DOM加載完畢以後，但並非當即觸發，而是延遲一段不肯定的時間。儘管如此，它會肯定在window的onload事件以前觸發。

3. doScroll方法 

Diego Perini 介紹了一種hack方法用於IE瀏覽器這裏。一些document操做方法只能在DOM結構加載完畢以後才能進行，所以直到DOM加載完畢以前調用這些方法都會失敗。他使用doScroll方法把文檔移向最左邊（文檔原本的位置），當doScroll執行成功時，表示文檔已經加載完畢。須要注意的是，這種方式只能用於主文檔，而不適用iframe。

if (document.documentElement.doScroll && toplevel) {
    doScrollCheck();
}
function doScrollCheck() {
    try {
        document.documentElement.doScroll("left");
    }
    catch (error) {
        setTimeout(doScrollCheck, 1);
        return;
    } 
// 執行代碼
// ...
}


jquery 2.0之前的版本使用了上面的三種策略，2.0之後由於支持的瀏覽器有所變化，只使用了DOMContentLoaded事件。

獲取document的ready事件，還有一些其它的hack方式，你們若是有興趣能夠思考一下。