JS事件添加和移出的兼容写法示例
编程学习 2021-07-04 19:59www.dzhlxh.cn编程入门
这篇文章主要介绍了JS事件添加和移出的兼容写法,结合实例形式分析了javascript针对不同浏览器实现实现添加与移除事件的相关技巧与使用方法,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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 , type , handler){
if(element.removeEventListener){
element.removeEventListener(type , handler , 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.
可以像狼蚁网站SEO优化这样使用EventUtil对象:
var btn = document.getElementById("myBtn");
var handler = function(){
alert("Clicked");
};
EventUtil.addHandler(btn , "click", handler);
//略去其他代码
EventUtil.removeHandler(btn, "click", handler);
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。