var btn=document.getElementById("mybtn");
var hander=function(){
alert("clicked");
}
btn.detachEvent("onclick",hander}); // 移除
以上三种方式为目前的主要的事件处理程序方式，那看到这里你肯定会想到，既然不同的浏览器会有不同的差异，那怎么保证跨浏览器的事件处理程序呢？
为了以跨浏览器的方式处理事件，不少的开发人员是使用能够隔离浏览器差异性的Javascript库，还有一些开发人员会自己开发最合适的事件处理方法。
这里提供一个EventUtil对象,可以用这个对象来处理浏览期间的差异：
复制代码 代码如下:
var EventUtil = {
addHandler: function(element, type, handler){ // 该方法接受3个参数：要操作的元素，事件名称和事件处理程序函数
if (element.addEventListener){ //检查传入的元素是否存在DOM2级方法
element.addEventListener(type, handler, false); // 若存在，则使用该方法
} else if (element.addEvent){ // 如果存在的是IE的方法
element.attachEvent("on" + type, handler); //则使用IE的方法，注意，这里的事件类型必须加上"on"前缀。
} else { // 最后一种可能是使用DOM0级
element["on" + type] = hander;
}
},
removeHandler: function(element, type, handler){ // 该方法是删除之前添加的事件处理程序
if (element.removeEventListener){ //检查传入的元素是否存在DOM2级方法
element.removeEventListener(type, handler, false); // 若存在，则使用该方法
} else if (element.detachEvent){ // 如果存在的是IE的方法
element.detachEvent("on" + type, handler); //则使用IE的方法，注意，这里的事件类型必须加上"on"前缀。
} else { // 最后一种可能是使用DOM0及方法(在现代浏览器中，应该不会执行这里的代码)
element["on" + type] = null;
}
}
};
可以像下面这样使用EventUtil对象:
复制代码 代码如下:
var btn =document.getElementById("mybtn");
var hander= function(){
alert("clicked");
};
//这里省略了部分代码
EventUtil.addHandler(btn,"click",hander);
//这里省略了部分代码
EventUtil.removeHandler(btn,"click",hander); //移除之前添加的事件处理程序
可见，使用addHandler和removeHandler来添加和移除事件处理程序还是很方便的。
您可能感兴趣的文章: