[js] 第311天 DOM0、DOM2、DOM3事件处理方式的区别是什么？

[haizhilin2013]

第311天 DOM0、DOM2、DOM3事件处理方式的区别是什么？

我也要出题

[longhui520]

   1.DOM0级事件处理方式：
      btn.onclick = func;
      btn.onclick = null;
   2.DOM2级事件处理方式：
      btn.addEventListener('click', func, false);
      btn.removeEventListener('click', func, false);
      btn.attachEvent("onclick", func);//IE
      btn.detachEvent("onclick", func);//IE
   3.DOM3级事件处理方式：
      eventUtil.addListener(input, "textInput", func);
      eventUtil 是自定义对象，textInput 是DOM3级事件

参考文章
参考文章

[xiaoqiangz]

DOM0级
var btn = document.getElementById("btn");
btn.onclick = function(){
alert(this.id);//this指定当前元素btn
}
DOM2级：DOM2级事件处理方式指定了，添加事件处理程序和删除事件处理程序的方法，分别是
addEventListener(eventName,func);
removeEventListener(eventName,func);
IE下：
attachEvent("eventName", func)
detachEvent("eventName", func)

DOM3级：DOM浏览器中可能发生的事件有很多种，不同事件类型具有不同的信息，DOM3级事件规定了一下几种事件：
UI事件，当用户与页面上的元素交互时触发；
焦点事件，当元素获得或者失去焦点时触发；
鼠标事件，当用户通过鼠标在页面上执行操作时触发；
滚轮事件，当使用鼠标滚轮（或类似设备）时触发；
文本事件，当在文档中，输入文本时触发；
键盘事件，当用户通过键盘在页面上执行操作时触发；
合成事件，当为IME（Input Method Editor，输入法编辑器）输入字符时触发；
变动事件，当底层Dom结构发生变化时触发；
DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件。包括IE9在内的主流浏览器都支持DOM2级事件，IE9也支持DOM3级事件。
DOM中的事件模拟（自定义事件）：
DOM3级还定义了自定义事件，自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。要创建的自定义事件可以由createEvent("CustomEvent");
返回的对象有一个initCustomEvent（）方法接收如下四个参数。
1）type：字符串，触发的事件类型，自定义。例如 “keyDown”，“selectedChange”;
2）bubble（布尔值）：标示事件是否应该冒泡；
3）cancelable(布尔值)：标示事件是否可以取消；
4）detail（对象）：任意值，保存在event对象的detail属性中；
var EventUtil = {
addEventHandler:function(element,type.handler){
if(element.addEventListener){
element.addEventListener(type,handler);
}else if(element.attachEvent){
element.attachEvent("on" + type,handler);
}else{
element["on" + type] = handler;
}
},
removeEventHandler:function(element,type,handler){
if(element.addEventListener){
element.removeEventListener(type,handler);
}else if(element.detachEvent){
element.detachEvent("on" + type,handler);
}else{
element["on"+type] = null;
}
}
}
eventUtil.addListener(input, "change", func);