DOMContentLoaded事件

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)；

这段代码实际意思是：“在当前JavaScript处理完成后立即运行这个函数。”在页面下载和构建期间，只有一个JavaScript处理过程，因此超时调用会在该过程结束时立即触发。至于这个事件与DOMContentLoaded被触发的时间是否同步，主要还是取决与用户使用的浏览器页面中的其它代码。为了确保这个方法有效，必须将其作为页面中的第一个超时调用；即便如此，也还是无法保证在所有浏览器中该超时调用一定会遭遇load事件被触发。