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事件被觸發。