继基于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...等等, 其实现原理大同小异.