一、何時觸發這兩個事件？
1、當 onload 事件觸發時，頁面上所有的DOM，樣式表，腳本，圖片，flash都已經加載完成了。
2、當 DOMContentLoaded 事件觸發時，僅當DOM加載完成，不包括樣式表，圖片，flash。
二、為什么要區分？
開發中我們經常需要給一些元素的事件綁定處理函數。但問題是，如果那個元素還沒有加載到頁面上，但是綁定事件已經執行完了，是沒有效果的。這兩個事件大致就是用來避免這樣一種情況，將綁定的函數放在這兩個事件的回調中，保證能在頁面的某些元素加載完畢之后再綁定事件的函數。
當然DOMContentLoaded機制更加合理，因為我們可以容忍圖片，flash延遲加載，卻不可以容忍看見內容后頁面不可交互。
這里又要牽扯到頁面加載渲染的原理了：
1、加載樣式表會阻塞外鏈腳本的執行
一些Gecko和Webkit引擎版本的瀏覽器，包括IE8在內，會同時發起多個Http請求來並行下在樣式表和腳本。但腳本不會被執行，直到樣式被加載完成。在未加載完之前甚至頁面也不會被渲染。但是在opera中樣式的加載不會阻塞腳本的執行。
因此：目前通用的作法是把腳本和樣式都以外鏈形式引入，甚至在jquery的官方文檔中也是這樣推薦的。對於大部分腳本來說，這樣的腳本等待外鏈的機制還是有意義的，比如一些DOM和樣式操作需要讀取元素的位置，顏色等。這就需要樣式先於腳本加載
檢驗方法：嘗試強制使服務器端使style延遲一段時間才加載（甚至10秒），測試的結果是，在某些版本的Firefox，Chrome中最后一段腳本仍然是可以讀出style的屬性值（因為style始終先於javascript加載），比如#FF0000或者rgb(255, 0, 0)，而這驗證了我上面的說法。而在opera中卻無法讀出style的屬性。代碼如下：
html 文件內容
<!DOCTYPE html>
<head>
<linkrel="stylesheet"href="stylesheet.css">
<scriptsrc="script.js"></script>
</head>
<body>
<divid="element">The element</div><
/body>
</html>
stylesheet.css 文件內容
#element { color: red; }
script.js文件內容
document.addEventListener('DOMContentLoaded',function(){
alert(getComputedStyle(document.getElementById('element'),null).color);},
false);
2、各大javascript框架如何實現domReady事件的
早期版本的瀏覽器是沒有DOMContentLoaded事件的那么它們怎么模擬實現類似功能呢？先來說說原理
(1)、如果是webkit引擎則輪詢document的readyState屬性，當值為loaded或者complete時則觸發DOMContentLoaded事件，對webkit525之后版本直接可以注冊DOMContentLoaded事件
if(Browser.Engine.webkit){
timer = window.setInterval(function(){
if(/loaded|complete/.test(document.readyState))
fireContentLoadedEvent();
},0);
}
(2)、IE處理方式有多種
a、在頁面臨時插入一個script元素，並設置defer屬性，最后把該腳本加載完成視作DOMContentLoaded事件來觸發。這樣做有一個問題是，如果插入腳本的頁面包含iframe的話，會等到iframe加載完才觸發，其實這與onload是無異的。即這個方法不准確。
b、通過setTiemout來不斷的調用documentElement的doScroll方法，直到調用成功則出觸發DOMContentLoaded。這樣做的原理是在IE下，DOM的某些方法只有在DOM解析完成后才可以調用，doScroll就是這樣一個方法，反過來當能調用doScroll的時候即是DOM解析完成之時，與prototype中的document.write相比，該方案可以解決頁面有iframe時失效的問題
c、首先注冊document的onreadystatechange事件，但經測試后該方法與window.onload相當，效果不大。下面是jquery做的兼容性處理代碼。
document.attachEvent("onreadystatechange",
function(){
if( document.readyState ==="complete"){
document.detachEvent("onreadystatechange", arguments.callee );
jQuery.ready();}
});
接下來具體看一看幾大前端框架是如何綜合運用這幾個方法的。
jQuery.ready.promise = function( obj ) {//定義一個狀態機
if ( !readyList ) {//保證頁面只創建一個延遲對象，多次使用$.ready() 則直接使用延遲對象done方法加入回調隊列
readyList = jQuery.Deferred();//異步延遲對象
// readyRE = /complete|loaded|interactive/,
// Catch cases where $(document).ready() is called after the browser event has already occurred.
// we once tried to use readyState "interactive" here, but it caused issues like the one
// discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
if ( document.readyState === "complete" ) {//
這個屬性是只讀的，傳回值有以下的可能：
//0-UNINITIALIZED：XML 對象被產生，但沒有任何文件被加載。
//1-LOADING：加載程序進行中，但文件尚未開始解析。
//2-LOADED：部分的文件已經加載且進行解析，但對象模型尚未生效。
//3-INTERACTIVE：僅對已加載的部分文件有效，在此情況下，對象模型是有效但只讀的。
//4-COMPLETED：文件已完全加載，代表加載成功
// Handle it asynchronously to allow scripts the opportunity to delay ready
setTimeout( jQuery.ready );
// Standards-based browsers support DOMContentLoaded
} else if ( document.addEventListener ) {//符合W3C標准的瀏覽器
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", completed, false );
// A fallback to window.onload, that will always work
window.addEventListener( "load", completed, false );//還是給load事件注冊了事件，以防不測，做為回滾用
// If IE event model is used
} else {
// Ensure firing before onload, maybe late but safe also for iframes
document.attachEvent( "onreadystatechange", completed );
// A fallback to window.onload, that will always work
window.attachEvent( "onload", completed );
// If IE and not a frame
// continually check to see if the document is ready
var top = false;
try {//判斷是否為iframe，如果不是的話采用不斷的輪詢scorll的方法
top = window.frameElement == null && document.documentElement;
} catch(e) {}
if ( top && top.doScroll ) {
(function doScrollCheck() {
if ( !jQuery.isReady ) {
try {
// Use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
top.doScroll("left");
} catch(e) {
return setTimeout( doScrollCheck, 50 );
}
// detach all dom ready events
detach();
// and execute any waiting functions
jQuery.ready();//實際：readyList.resolveWith( document, [ jQuery ] );
}
})();
}
}
}
return readyList.promise( obj );
};
再貼上幾段其他框架的代碼，大同小異，就不具體分析了
prototype
(function(GLOBAL) {
/* Support for the DOMContentLoaded event is based on work by Dan Webb,
Matthias Miller, Dean Edwards, John Resig, and Diego Perini. */
var TIMER;
function fireContentLoadedEvent() {
if (document.loaded) return;
if (TIMER) window.clearTimeout(TIMER);
document.loaded = true;
document.fire('dom:loaded');
}
function checkReadyState() {
if (document.readyState === 'complete') {
document.detachEvent('onreadystatechange', checkReadyState);
fireContentLoadedEvent();
}
}
function pollDoScroll() {
try {
document.documentElement.doScroll('left');
} catch (e) {
TIMER = pollDoScroll.defer();
return;
}
fireContentLoadedEvent();
}
if (document.readyState === 'complete') {
// We must have been loaded asynchronously, because the DOMContentLoaded
// event has already fired. We can just fire `dom:loaded` and be done
// with it.
fireContentLoadedEvent();
return;
}
if (document.addEventListener) {
// All browsers that support DOM L2 Events support DOMContentLoaded,
// including IE 9.
document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);
} else {
document.attachEvent('onreadystatechange', checkReadyState);
if (window == top) TIMER = pollDoScroll.defer();
}
// Worst-case fallback.
Event.observe(window, 'load', fireContentLoadedEvent);
})(this);
mootools
(function(GLOBAL) {
/* Support for the DOMContentLoaded event is based on work by Dan Webb,
Matthias Miller, Dean Edwards, John Resig, and Diego Perini. */
var TIMER;
function fireContentLoadedEvent() {
if (document.loaded) return;
if (TIMER) window.clearTimeout(TIMER);
document.loaded = true;
document.fire('dom:loaded');
}
function checkReadyState() {
if (document.readyState === 'complete') {
document.detachEvent('onreadystatechange', checkReadyState);
fireContentLoadedEvent();
}
}
function pollDoScroll() {
try {
document.documentElement.doScroll('left');
} catch (e) {
TIMER = pollDoScroll.defer();
return;
}
fireContentLoadedEvent();
}
if (document.readyState === 'complete') {
// We must have been loaded asynchronously, because the DOMContentLoaded
// event has already fired. We can just fire `dom:loaded` and be done
// with it.
fireContentLoadedEvent();
return;
}
if (document.addEventListener) {
// All browsers that support DOM L2 Events support DOMContentLoaded,
// including IE 9.
document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);
} else {
document.attachEvent('onreadystatechange', checkReadyState);
if (window == top) TIMER = pollDoScroll.defer();
}
// Worst-case fallback.
Event.observe(window, 'load', fireContentLoadedEvent);
})(this);
紙上學來終覺淺，絕知此事要躬行。自己寫一段。
(function(window,undefined){
hobo = {}
var readyList = [],
_isReady =false;
function readyFn(){
console.log(event.type)
if ( document.addEventListener || event.type === "load" || document.readyState === "complete" ) {
detach();
_isReady =true;
fireReady();
}
}
function fireReady(){
for (var i = 0,fn; fn = readyList[i++];) {
fn();
};
readyList = null;
fireReady = function(){}//惰性函數，防止IE9二次調用
}
function detach() { if ( document.addEventListener ) { document.removeEventListener( "DOMContentLoaded", readyFn, false ); window.removeEventListener( "load", readyFn, false ); } else { document.detachEvent( "onreadystatechange", readyFn ); window.detachEvent( "onload", readyFn ); } } hobo.ready = function(fn){ if(readyList){ readyList.push(fn) } if(readyList.length>1){ return; } if(document.readyState === 'complete'){ setTimeout(readyFn); }else if (document.addEventListener) {//符合W3C 則監聽 DOMContentLoaded和load事件 console.log('addEventListener') document.addEventListener('DOMContentLoaded',readyFn,false); document.addEventListener('DOMContentLoaded',readyFn,false); }else{//針對IE console.log('attachEvent') document.attachEvent('onreadystatechange',readyFn); document.attachEvent('onload',readyFn); } //針對IE並且非frame var top = false; try{ top = window.frameElement===null&&document.documentElement }catch(e){} if(top&&top.doScroll){ (function doScrollCheck(){ if (!_isReady) { try {//每隔50秒輪詢 檢測是否支持doScroll()方法 top.doScroll("left"); } catch(e) { return setTimeout( doScrollCheck, 50 ); } }; }) } } window.hobo =hobo }(window,void 0)) //使用 hobo.ready(function(){ console.log(11111); }) hobo.ready(function(){ console.log(22222); })