[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);