js事件处理程序跨浏览器解决方案
本文实例为大家分享了js事件处理程序跨浏览器解决方案，供大家参考，具体内容如下
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title></title>
</head>
<body>
<div>
<inputtype="button"id="button1"value="按钮"/>
</div>
<scripttype="text/javascript">
functionshow(){
alert("Helloworld!");
}
//声明一个对象
vareventUtil={
//添加句柄
addHandler:function(element,type,handler){
//DOM2级事件处理判断
if(element.addEventListener){
element.addEventListener(type,handler,false);
}elseif(element.attachEvent){//IE事件处理判断
element.attachEvent('on'+type,handler);
}else{//DOM0级事件判断
element['on'+type]=handler;
}
},
//删除句柄
removeHandler:function(element,type,handler){
//DOM2级事件处理判断
if(element.removeEventListener){
elememt.removeEventListener(type,handler,false);
}elseif(element.detachEvent){//IE事件处理判断
element.detachEvent('on'+type,handler);
}else{//DOM0级事件判断
element['on'+type]=null;
}
}
}
eventUtil.addHandler(button3,'click',show);
</script>
</body>
</html>
再为大家分享js原生事件处理跨浏览器的代码：
//跨浏览器的事件处理器添加方式
varEventUtil={
addHandler:function(elem,type,handler){
if(elem.addEventListener){
elem.addEventListener(type,handler,false);
}
elseif(elem.attachEvent){
elem.attachEvent("on"+type,handler);//添加多个同一类型的handler时，IE方式的规则是最后添加的最先触发
}
else{
if(typeofelem["on"+type]==='function'){
varoldHandler=elem["on"+type];
elem["on"+type]=function(){
oldHandler();
handler();
}
}
else{
elem["on"+type]=handler;//支持添加多个事件处理器
}
}
},
getEvent:function(event){
returnevent?event:window.event;
},
getTarget:function(event){
returnevent.target||event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}
else{
event.returnValue=false;
}
},
removeHandler:function(elem,type,handler){
if(elem.removeEventListener){
elem.removeEventListener(type,handler,false);
}
elseif(elem.detachEvent){
elem.detachEvent("on"+type,handler);
}
else{
elem["on"+type]=null;//不支持移除单一事件处理器，只能全部移除
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}
else{
event.cancelBubble=true;
}
},
getRelatedTarget:function(event){
if(event.relatedTarget){
returnevent.relatedTarget;
}
elseif(event.toElement&&event.type=="mouseout"){
returnevent.toElement;
}
elseif(event.fromElement&&event.type=="mouseover"){
returnevent.fromElement;
}
else{
returnnull;
}
},
/*IE8点击左键和中键都是0；FF无法识别中键；Chrome正常*/
getButton:function(event){//返回0，1，2-左，中，右
if(document.implementation.hasFeature("MouseEvents","2.0")){
returnevent.button;
}
else{
switch(event.button){
case0:case1:case3:case5:case7:
return0;
break;
case2:case6:
return2;
break;
case4:
return1;
break;
default:
break;
}
}
},
/*只能检测keypress事件，返回值等于将要显示的字符编码*/
/*IE和Chrome只有能显示的字符键才触发，FF其它键也能触发，返回值为0*/
getCharCode:function(event){
if(typeofevent.charCode=="number"){
returnevent.charCode;
}
else{
returnevent.keyCode;
}
}
};
以上就是本文的全部内容，希望对大家解决js事件处理程序跨浏览器有所帮助。