DOM2级事件处理程序成功地解决了前面所有事件处理程序的问题，堪称perfect!!!! 然而总是特立独行的IE浏览器又有新花样，它也有自己的一套事件处理程序，下面我们就来看看吧。
第四部分：IE事件处理程序
IE事件处理程序中有类似与DOM2级事件处理程序的两个方法：
1.attachEvent()
2.detachEvent()
它们都接收两个参数：
1.事件处理程序名称。如onclick、onmouseover，注意：这里不是事件，而是事件处理程序的名称，所以有on。
2.事件处理程序函数。如function(){alert("clicked");}
之所以没有和DOM2级事件处理程序中类似的第三个参数，是因为IE8及更早版本只支持冒泡事件流。
注意：
1.IE事件处理程序中attachEvent()的事件处理程序的作用域和DOM0与DOM2不同，她的作用域是在全局作用域中。因此，不同于DOM0和DOM2中this指向元素，IE中的this指向window。
2.同样，我们可以使用attachEvent()来给同一个元素添加多个事件处理程序。但是与DOM2不同，事件触发的顺序不是添加的顺序而是添加顺序的相反顺序。
3.同样地，通过attachEvent()添加的事件处理程序必须通过detachEvent()方法移除，同样的，不能使用匿名函数。
4.支持IE事件处理程序的浏览器不只有IE浏览器，还有Opera浏览器。
第五部分：跨浏览器的事件处理程序
实际上，这一部分视为了跨浏览器使用，将前面的几部分结合起来就可以了。
这一部分需要创建两个方法：
addHandler() --这个方法职责是视情况来使用DOM0级、DOM2级、IE事件处理程序来添加事件。
removeHandler()--这个方法就是移除使用addHandler添加的事件。
这两个方法接收相同的三个参数：
1.要操作的元素--通过dom方法获取
2.事件名称--注意：没有on，如click、mouseover
3.事件处理程序函数--即handler函数
这两个方法的构造情况如下：
var EventUtil={ addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false);//注意：这里默认使用了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);//注意：这里默认使用了false（冒泡） }else if(element.detachEvent){ element.detachEvent("on"+type,handler); }else{ element["on"+type]=null; } } };
即先判断DOM2级事件处理程序，再判断IE事件处理程序，最后使用DOM0级事件处理程序。
例10：通过这个例子来使用上面构造的方法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跨浏览器事件处理程序</title> </head> <body> <button>点我</button> <script> var EventUtil={ addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false);//注意：这里默认使用了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);//注意：这里默认使用了false（冒泡） }else if(element.detachEvent){ element.detachEvent("on"+type,handler); }else{ element["on"+type]=null; } } }; function handler(){ alert("clicked"); } var button=document.getElementById("button"); EventUtil.addHandler(button,"click",handler); </script> </body> </html>
最后浏览器成功弹出“clicked”。