我们知道不同的浏览器实现事件是不同的，就比如说我们常见的有三种方法：
1，dom0处理事件的方法，以前的js处理事件都是这样写的。
(function () {
var p=document.getElementById("huchao1");
//dom0处理方法
p.onclick=function (a) {
console.log(a.type);
// body...
}
//移除方法如下：
p.onclick=null;
// body...
})()
2，dom2 处理时间的方法 如下：可以同时添加两个相同的事件类型，移除这个时间的时候，函数必须不是匿名函数，否则不起作用
(function () {
var a=document.getElementById("huchao1");
a.addEventListener("click",function () {
console.log(this.id);
// body...
// false 表示在冒泡阶段
},false);
a.addEventListener("click",function () {
console.log("alll");
// body...
},false);
//这样移除不起作用，函数必须不是匿名函数
a.removeEventListener("click",function () {
// body...
},false);
// body...
})()
3，ie处理事件，删除事件detachEvent 注意此处是onclick ,不是click
(function () {
var btn=document.getElementById("huchao1");
btn.attachEvent("onclick",function () {
alert("dd");
// body...
})
// body...
})()
如何写一个跨浏览器的事件处理程序呢：综上所述如下：
(function () {
var EventUtil={
addHandler:function (element,type,Handler) {
//此处dom2事件
if (element.addEventListener) {
//false表示冒泡阶段
element.addEventListener(type,Handler,false);
}else if(element.attachEvent){
//ie处理事件
element.attachEvent("on"+type,Handler);
}else{
//dom0处理事件
element["on"+type]=Handler;
}
// body...
},
removeHandler:function (element,type,Handler) {
// body...
if (element.addEventListener) {
element.removeEventListener(type,Handler,false);
}else if(element.attachEvent){
element.removeEvent("on"+type,Handler);
}else{
element["on"+type]=null;
}
}
}
var btn=document.getElementById("huchao1");
var handler=function () {
alert("huchao");
// body...
}
EventUtil.addHandler(btn,"click",handler);
EventUtil.removeHandler(btn,"click",handler);
// body...
})()
(function () { var p=document.getElementById("huchao1"); //dom0处理方法 p.onclick=function (a) { console.log(a.type); // body... } //移除方法如下： p.onclick=null;
// body... })()