一涕蚤、何時觸發(fā)這兩個事件宪卿？
1的诵、當 onload 事件觸發(fā)時，頁面上所有的DOM愧捕，樣式表奢驯，腳本，圖片次绘，flash都已經(jīng)加載完成了瘪阁。
2、當 DOMContentLoaded 事件觸發(fā)時邮偎，僅當DOM加載完成管跺，不包括樣式表，圖片禾进，flash豁跑。
二、為什么要區(qū)分泻云？
開發(fā)中我們經(jīng)常需要給一些元素的事件綁定處理函數(shù)艇拍。但問題是，如果那個元素還沒有加載到頁面上宠纯，但是綁定事件已經(jīng)執(zhí)行完了卸夕，是沒有效果的。這兩個事件大致就是用來避免這樣一種情況婆瓜，將綁定的函數(shù)放在這兩個事件的回調(diào)中快集，保證能在頁面的某些元素加載完畢之后再綁定事件的函數(shù)。
當然DOMContentLoaded機制更加合理廉白，因為我們可以容忍圖片个初，flash延遲加載，卻不可以容忍看見內(nèi)容后頁面不可交互猴蹂。
這里又要牽扯到頁面加載渲染的原理了：
1院溺、加載樣式表會阻塞外鏈腳本的執(zhí)行
一些Gecko和Webkit引擎版本的瀏覽器，包括IE8在內(nèi)磅轻，會同時發(fā)起多個Http請求來并行下在樣式表和腳本珍逸。但腳本不會被執(zhí)行，直到樣式被加載完成瓢省。在未加載完之前甚至頁面也不會被渲染弄息。但是在opera中樣式的加載不會阻塞腳本的執(zhí)行。
因此：目前通用的作法是把腳本和樣式都以外鏈形式引入勤婚，甚至在jquery的官方文檔中也是這樣推薦的摹量。對于大部分腳本來說，這樣的腳本等待外鏈的機制還是有意義的，比如一些DOM和樣式操作需要讀取元素的位置缨称，顏色等凝果。這就需要樣式先于腳本加載
檢驗方法：嘗試強制使服務器端使style延遲一段時間才加載（甚至10秒），測試的結果是睦尽，在某些版本的Firefox器净，Chrome中最后一段腳本仍然是可以讀出style的屬性值（因為style始終先于javascript加載），比如#FF0000或者rgb(255, 0, 0)当凡，而這驗證了我上面的說法山害。而在opera中卻無法讀出style的屬性。代碼如下：
html 文件內(nèi)容
<!DOCTYPE html>
<head>
<linkrel="stylesheet"href="stylesheet.css">
<scriptsrc="script.js"></script>
</head>
<body>
<divid="element">The element</div><
/body>
</html>
stylesheet.css 文件內(nèi)容
#element { color: red; }
script.js文件內(nèi)容
document.addEventListener('DOMContentLoaded',function(){
alert(getComputedStyle(document.getElementById('element'),null).color);},
false);
2沿量、各大javascript框架如何實現(xiàn)domReady事件的
早期版本的瀏覽器是沒有DOMContentLoaded事件的那么它們怎么模擬實現(xiàn)類似功能呢浪慌？先來說說原理
(1)、如果是webkit引擎則輪詢document的readyState屬性朴则，當值為loaded或者complete時則觸發(fā)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事件來觸發(fā)撤蚊。這樣做有一個問題是古掏，如果插入腳本的頁面包含iframe的話，會等到iframe加載完才觸發(fā)拴魄，其實這與onload是無異的冗茸。即這個方法不準確席镀。
b匹中、通過setTiemout來不斷的調(diào)用documentElement的doScroll方法，直到調(diào)用成功則出觸發(fā)DOMContentLoaded豪诲。這樣做的原理是在IE下顶捷，DOM的某些方法只有在DOM解析完成后才可以調(diào)用，doScroll就是這樣一個方法屎篱，反過來當能調(diào)用doScroll的時候即是DOM解析完成之時服赎，與prototype中的document.write相比，該方案可以解決頁面有iframe時失效的問題
c交播、首先注冊document的onreadystatechange事件重虑，但經(jīng)測試后該方法與window.onload相當，效果不大秦士。下面是jquery做的兼容性處理代碼缺厉。
document.attachEvent("onreadystatechange",
function(){
if( document.readyState ==="complete"){
document.detachEvent("onreadystatechange", arguments.callee );
jQuery.ready();}
});
接下來具體看一看幾大前端框架是如何綜合運用這幾個方法的。
jQuery.ready.promise = function( obj ) {//定義一個狀態(tài)機
if ( !readyList ) {//保證頁面只創(chuàng)建一個延遲對象，多次使用$.ready() 則直接使用延遲對象done方法加入回調(diào)隊列
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 對象被產(chǎn)生命爬，但沒有任何文件被加載。
//1-LOADING：加載程序進行中辐脖，但文件尚未開始解析饲宛。
//2-LOADED：部分的文件已經(jīng)加載且進行解析，但對象模型尚未生效嗜价。
//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(){}//惰性函數(shù)潮模，防止IE9二次調(diào)用
}
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 則監(jiān)聽 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);
})
