文档加载事件

前面介绍的是 JavaScript 事件处理的基本原理，接下来深入探索具体的事件类别。

Window 对象的 load 事件直到文档和所有图片加载完成后才触发，但是，在文档解析完成，图片加载完毕之前运行脚本也是安全的，这样也会缩短 Web 应用的启动事件，为此，我们可以通过 DOMContentLoaded 事件结合 document.readyState 来实现，DOMContentLoaded 事件在文档加载解析完毕且所有延迟脚本执行完毕时触发：

/**
 * 当文档准备就绪时调用函数
 * 当 DOMContentLoaded、readystatechange 或 load 事件发生时会触发注册函数
 */
var whenReady = (function () {
    var funcs = [];  // 获得事件时要运行的函数
    var ready = false;  // 触发事件处理函数时，切换到true
    
    // 文档准备就绪时调用事件处理程序
    function handler(e) {
        // 已运行过直接返回
        if (ready)
            return;
    
        // 如果发生 readystatechange 事件但状态不是 complete，那么文档尚未准备好
        if (e.type === "readystatechange" && document.readyState !== "complete") {
            return;
        }
    
        // 运行所有注册函数
        for (var i = 0; i < funcs.length; i++) {
            funcs[i].call(document);
        }
    
        // 设置 ready 为 true 并移除所有函数
        ready = true;
        funcs = null;
    }
    
    // 为接收到的任何事件注册处理程序
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", handler, false);
        document.addEventListener("readystatechange", handler, false);
        window.addEventListener("load", handler, false);
    } else if (document.attachEvent) {
        document.attachEvent("onreadystatechange", handler);
        window.attachEvent("onload", handler);
    }
    
    // 返回 whenReady() 函数
    return function whenReady(f) {
        if (ready)
            f.call(document);
        else
            funcs.push(f);
    }
}());