題目：簡述domready和onload事件的區(qū)別梧却？圖片的onload和domready和頁面onload的先后順序奈惑，并簡述原因。
題目分析參考——鏈接
Dom文檔加載的步驟：
- 解析html結(jié)構(gòu)；
- 加載外部腳本和樣式表文件；
- 解析并執(zhí)行腳本酷愧；
- dom樹構(gòu)建完成（DOMContentLoaded）；
- 加載圖片等外部文件缠诅；
- 頁面加載完畢溶浴。
DOM ready、DOM Load管引、圖片Load
DOM ready：（也叫DOMContentLoaded ）士败，在第4步完成后觸發(fā)；
圖片onload：是在第5步完成后觸發(fā)褥伴；
頁面onload：是第6步完成后觸發(fā)谅将。
由此可見三者執(zhí)行順序?yàn)椋?strong>domready→圖片load→頁面load。
DOMContentLoaded與Load事件觸發(fā)的時(shí)機(jī)不一樣重慢，先觸發(fā)DOMContentLoaded事件饥臂，后觸發(fā)load事件。
如果外部腳本中伤锚，出現(xiàn)defer延遲腳本或async異步腳本擅笔，這兩種腳本有可能在DOMContentLoaded事件之前或之后執(zhí)行志衣。
domready和onload事件區(qū)別：
前者：在DOM文檔結(jié)構(gòu)準(zhǔn)備完畢后就可以對DOM進(jìn)行操作屯援；
后者：當(dāng)頁面完全加載后（整個(gè)document文檔包括圖片、javascript文件念脯、CSS文件等外部資源)狞洋，就會觸發(fā)window上面的load事件。
load事件
兩種定義onload事件處理程序方式
// 1. 跨瀏覽器EventUtil對象
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;
}
},
removeHandler : function(element, type, handler){
if(element.removeEventListener){
element.removeEventListener(type, handler, false);
}else if(element.detachEvent){
element.detachEvent("on" + type, handler);
}else{
element["on"+ type] = null;
}
}
};
EventUtil.addHandler(window, "load", function(event)){
alert("loaded");
};
更多關(guān)于EventUtil跨瀏覽器事件處理對象绿店，請看我的筆記——DOM事件
//2.body添加onload特性
<body onload = "alert('loaded!')">
</body>
