JavaScript中的跨浏览器事件操作的基本方法整理
绑定事件
EU.addHandler=function(element,type,handler){
//DOM2级事件处理，IE9也支持
if(element.addEventListener){
element.addEventListener(type,handler,false);
}
elseif(element.attachEvent){
//type加'on'
//IE9也可以这样绑定
element.attachEvent('on'+type,handler);
}
//DOM0级事件处理步，事件流也是冒泡
else{
element['on'+type]=handler;
}
};
取消绑定事件
和绑定事件的处理基本一致，有一个注意点：
传入的handler必须与绑定事件时传入的相同（指向同一个函数）
EU.removeHandler=function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler);
}
elseif(element.attachEvent){
element.detachEvent('on'+type,handler);
}
else{
//属性置空就可以
element['on'+type]=null;
}
};
跨浏览器添加事件
functionaddEvent(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}elseif(obj.attachEvent){//IE
obj.attchEvent('on'+type,fn);
}
}
跨浏览器移除事件
functionremoveEvent(obj,type,fn){
if(obj.removeEventListener){
obj.removeEventListener(type,fn,false);
}elseif(obj.detachEvent){//兼容IE
obj.detachEvent('on'+type,fn);
}
}
跨浏览器阻止默认行为
functionpreDef(ev){
vare=ev||window.event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
}
跨浏览器获取目标对象
functiongetTarget(ev){
if(ev.target){//w3c
returnev.target;
}elseif(window.event.srcElement){//IE
returnwindow.event.srcElement;
}
}
跨浏览器获取滚动条位置
//跨浏览器获取滚动条位置，sp==scrollposition
functiongetSP(){
return{
top:document.documentElement.scrollTop||document.body.scrollTop,
left:document.documentElement.scrollLeft||document.body.scrollLeft;
}
}
跨浏览器获取可视窗口大小
functiongetWindow(){
if(typeofwindow.innerWidth!='undefined'){
return{
width:window.innerWidth,
height:window.innerHeight
}
}else{
return{
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
}
}
},