浏览器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方式，你们若是有兴趣能够思考一下。