简述domready和onload事件的区别

题目：简述domready和onload事件的区别？图片的onload和domready和页面onload的先后顺序，并简述原因。

题目分析参考——链接

Dom文档加载的步骤：

1. 解析html结构；
2. 加载外部脚本和样式表文件；
3. 解析并执行脚本；
4. dom树构建完成（DOMContentLoaded）；
5. 加载图片等外部文件；
6. 页面加载完毕。

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特性