详解js几个绕不开的事件兼容写法
本文介绍了详解js几个绕不开的事件兼容写法，分享给大家，具体如下：
1、键盘事件keyCode兼容性写法
varinp=document.getElementById('inp')
varresult=document.getElementById('result')
functiongetKeyCode(e){
e=e?e:(window.event?window.event:"")
returne.keyCode?e.keyCode:e.which
}
inp.onkeypress=function(e){
result.innerHTML=getKeyCode(e)
}
2、求窗口大小的兼容写法
当我们获取滚动条滚动距离时:
IE,Chrome:document.body.scrollTop
FF:document.documentElement.scrollTop
//浏览器窗口可视区域大小（不包括工具栏和滚动条等边线） //1600*525 varclient_w=document.documentElement.clientWidth||document.body.clientWidth; varclient_h=document.documentElement.clientHeight||document.body.clientHeight; //网页内容实际宽高（包括工具栏和滚动条等边线） //1600*8 varscroll_w=document.documentElement.scrollWidth||document.body.scrollWidth; varscroll_h=document.documentElement.scrollHeight||document.body.scrollHeight; //网页内容实际宽高(不包括工具栏和滚动条等边线） //1600*8 varoffset_w=document.documentElement.offsetWidth||document.body.offsetWidth; varoffset_h=document.documentElement.offsetHeight||document.body.offsetHeight; //滚动的高度 varscroll_Top=document.documentElement.scrollTop||document.body.scrollTop;
3、DOM事件处理程序的兼容写法（能力检测）
vareventshiv={
//event兼容
getEvent:function(event){
returnevent?event:window.event;
},
//type兼容
getType:function(event){
returnevent.type;
},
//target兼容
getTarget:function(event){
returnevent.target?event.target:event.srcelem;
},
//添加事件句柄
addHandler:function(elem,type,listener){
if(elem.addEventListener){
elem.addEventListener(type,listener,false);
}elseif(elem.attachEvent){
elem.attachEvent('on'+type,listener);
}else{
//在这里由于.与'on'字符串不能链接，只能用[]
elem['on'+type]=listener;
}
},
//移除事件句柄
removeHandler:function(elem,type,listener){
if(elem.removeEventListener){
elem.removeEventListener(type,listener,false);
}elseif(elem.detachEvent){
elem.detachEvent('on'+type,listener);
}else{
elem['on'+type]=null;
}
},
//添加事件代理
addAgent:function(elem,type,agent,listener){
elem.addEventListener(type,function(e){
if(e.target.matches(agent)){
listener.call(e.target,e);//this指向e.target
}
});
},
//取消默认行为
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
//阻止事件冒泡
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
};
4、解决IE9以下浏览器不能使用opacity
opacity:0.5; filter:alpha(opacity=50); filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);
5、为一个元素绑定两个相同事件：attachEvent/attachEventLister出现的兼容问题
事件绑定:(不兼容需要两个结合做兼容if..else..)
IE8以下用:attachEvent('事件名',fn);
FF,Chrome,IE9-10用:attachEventLister('事件名',fn,false);
functionmyAddEvent(obj,ev,fn){
if(obj.attachEvent){
//IE8以下
obj.attachEvent('on'+ev,fn);
}else{
//FF,Chrome,IE9-10
obj.attachEventLister(ev,fn,false);
}
}
6、获取元素的非行间样式值
functiongetStyle(object,oCss){
if(object.currentStyle){
returnobject.currentStyle[oCss];//IE
}else{
returngetComputedStyle(object,null)[oCss];//除了IE
}
}
7、节点加载
//火狐下特有的节点加载事件，就是节点加载完才执行，和onload不同
//感觉用到的不多，直接把js代码放在页面结构后面一样能实现。。
document.addEventListener('DOMContentLoaded',function(){},false);//DOM加载完成。好像除IE6-8都可以.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。