本文实例讲述了JS事件添加和移出的兼容写法。分享给大家供大家参考,具体如下:
rush:js;">
var EventUtil = {
addHandler : function (element,type,handler {
if ( element.addEventListener){
element.addEventListener(type,handler,false);
}else if ( element.attachEvent) {
element.attachEvent("on"+type,handler);
}else {
element["on" + type] = handler;
}
},getEvent : function (event){
return event ? event : window.event;
},preventDefault : function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},removeHandsler : function (element,handler){
if(element.removeEventListener){
element.removeEventListener(type,false);
}else if(element.detachEvent){
element.detachEvent("on" + type,handler);
}else{
element["on" + type] = handler;
}
}
stopPropagation : function(event){
if(event.stopPropagation){
event.stopPropagation();
}else {
event.cancelBubble = true;
}
},getrelatedTarget : function(event){
if(event.relatedTarget){
return event.relatedTarget;
}else if (event.toElement){
return event.toElement;
}else if(event.fromElement){
return event.fromElement;
}esle {
return null;
}
},getButton : function (event){
if(document.implementation.hasFeature("MouseEvents","2.0")){
return event.button;
}else{
switch(event.button){
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
}
} ;
其中,addHandler 和 removeHandsler 个方法首先都会检测传入的元素中是否存在DOM2级方法.如果存在DOM2级方法,则使用该方法:传入事件类型,事件处理程序函数和第三个参数fasle(表示冒泡阶段). 如果存在的是IE的方法,则采取第二种方案.注意此时的事件类型必须加上"on"前缀.最后一种可能就是使用DOM0级方法(在现代浏览器中,应该不会执行这里的代码). 此时,我们使用的是方括号语法来将属性名指定为事件处理程序,或者将属性设置为null.
可以像下面这样使用EventUtil对象:
rush:js;">
var btn = document.getElementById("myBtn");
var handler = function(){
alert("Clicked");
};
EventUtil.addHandler(btn,"click",handler);
//略去其他代码
EventUtil.removeHandler(btn,handler);
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。