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 id="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”。