DOMContentLoaded事件

继基于Mozilla的浏览器之后，Opera9也支持了DOMContentLoaded事件。DOMContentLoaded事件与window对象的load事件是相对的。

两者的不同在于：window.onload，那必须等到网页上的二进制内容都加载完毕才会执行，而其实在它们载入之前，这个Page中的DOM早已载入完毕，可以调用了。

使用方法如下：document.addEventListener("DOMContentLoaded", init, false);

window的load事件会在页面中的一切都加载完毕时触发，但这个过程可能会因为要加载外部资源过多而颇费周折。而DOMContentLoaded事件则在形成完整的DOM树之后就会触发，不理会图像、JavaScript文件、CSS文件或其他资源是否已经下载完毕。与load事件不同，DOMContentLoaded支持在页面下载的早期添加事件处理程序，这也就意味着用户能够尽早地与页面进行交互。

要处理DOMContentLoaded事件，可以为document或window添加相应的事件处理程序（尽管这个事件会冒泡到window，但它的目标实际上是document）。来看下面的例子：

var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    }
};
EventUtil.addHandler(document, "DOMContentLoaded", function (event) {
    alert("Content loaded.");
});

DOMContentLoaded事件对象不会提供任何额外的信息（其target属性是document）。
Firefox、Chrome、Safari 3.1及更高的版本和Opera 9及更高版本都支持DOMContentLoaded事件，通常这个事件既可以添加事件处理程序，也可以执行其它DOM操作。这个事件始终都会在load事件之前触发。

对于不支持DOMContLoaded的浏览器，我们建议在页面加载期间设置一个事件为0毫秒的超时调用，如下面的例子所示：

sentTimeout(function () {
    //在此添加事件处理程序
}, 0)；

DOMContentLoaded是firefox下特有的Event, 当所有DOM解析完以后会触发这个事件。
    与DOM中的onLoad事件与其相近。但onload要等到所有页面元素加载完成才会触发, 包括页面上的图片等等。
    如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 而在Ajax运用中, 常常需要在onload中加入许多初始化的动作, 如果由于网络问题引起的图片加载过慢( 见: Ajax优化(2) -- lazierLoad img && js), 则必然影响用户的体验。
    在这种情况下firefox的DOMContentLoaded事件, 恰恰是我们需要的。

    目前,跨平台的DOMContentLoaded的解决方案有很多, 比如jQuery, Prototype...等等, 其实现原理大同小异.