题目：简述domready和onload事件的区别？图片的onload和domready和页面onload的先后顺序，并简述原因。
题目分析参考——链接
Dom文档加载的步骤：
- 解析html结构；
- 加载外部脚本和样式表文件；
- 解析并执行脚本；
- dom树构建完成（DOMContentLoaded）；
- 加载图片等外部文件；
- 页面加载完毕。
DOM ready、DOM Load、图片Load
DOM ready：（也叫DOMContentLoaded ），在第4步完成后触发；
图片onload：是在第5步完成后触发；
页面onload：是第6步完成后触发。
由此可见三者执行顺序为：domready→图片load→页面load。
DOMContentLoaded与Load事件触发的时机不一样，先触发DOMContentLoaded事件，后触发load事件。
如果外部脚本中，出现defer延迟脚本或async异步脚本，这两种脚本有可能在DOMContentLoaded事件之前或之后执行。
domready和onload事件区别：
前者：在DOM文档结构准备完毕后就可以对DOM进行操作；
后者：当页面完全加载后（整个document文档包括图片、javascript文件、CSS文件等外部资源)，就会触发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");
};
更多关于EventUtil跨浏览器事件处理对象，请看我的笔记——DOM事件
//2.body添加onload特性
<body onload = "alert('loaded!')">
</body>
