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...等等, 其實現原理大同小異.