js跨浏览器的事件侦听器和事件对象的使用方法
本文特意为跨浏览器实现添加事件侦听器和跨浏览器事件对象的使用方法做了下总结，并把这些方法打包，欢迎大家学习。
打包的一个EventUtil对象
varEventUtil={
//添加侦听事件
addEventListener:function(element,type,handler){
//IE9+、Firefox、Safari、chrome和Opera
if(element.addEventListener){
element.addEventListener(type,handler,false);
}
//IE8-
elseif(element.attachEvent){
element.attachEvent("on"+type,handler);
}
},
//移除侦听事件
removeEventListener:function(element,type,handler){
//IE9+、Firefox、Safari、chrome和Opera
if(element.addEventListener){
element.removeEventListener(type,handler,false);
}
//IE8-
elseif(element.attachEvent){
element.detachEvent("on"+type,handler);
}
},
//获取事件对象
getEvent:function(event){
if(typeofevent=="undefined"){
event=window.event;//IE浏览器
}
returnevent;
},
//获取触发事件的元素
getTarget:function(event){
if(typeofevent.srcElement=="undefined"){
returnevent.target;
}else{
returnevent.srcElement;//IE浏览器
}
},
//获取事件类型
getType:function(event){
returnevent.type;
},
//获取按键键码
getCharCode:function(event){
if(typeofevent.keyCode=="number"){
returnevent.keyCode;//IE8-、Firefox和opera
}else{
returnevent.charCode;
}
},
//获取鼠标相对于文档的位置,即页面坐标位置
getPagePosition:function(event){
varpageX=event.pageX,
pageY=event.pageY;
if(pageX==undefined){
pageX=event.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft);
}
if(pageY==undefined){
pageY=event.clientY+(document.body.scrollTop||document.documentElement.scrollTop);
}
return{
pageX:pageX,
pageY:pageY
};
},
//阻止事件的默认行为
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;//IE浏览器
}
},
//阻止事件冒泡
stopPropagation:function(event){
if(typeofevent.cancelBubble=="undefined"){
event.stopPropagation();
}else{
event.cancelBubble=true;//IE浏览器
}
}
};
测试代码
<divid="box"style="color:red;width:100%;height:200px;"> <inputtype="button"value="点击"id="btn"/> </div> <ahref="http://www.test.com"id="a">test</a>
varbox=document.querySelector("#box");
box.onclick=function(event){
event=EventUtil.getEvent(event);
alert(EventUtil.getType(event));
alert(EventUtil.getTarget(event));
};
varinput=document.querySelector("input");
input.onclick=function(event){
event=EventUtil.getEvent(event);
EventUtil.stopPropagation(event);
};
vara=document.getElementById("a");
a.onclick=function(event){
event=EventUtil.getEvent(event);
EventUtil.preventDefault(event);
};
以上就是跨浏览器实现添加事件侦听器和跨浏览器事件对象的使用方法，希望对大家的学习有所帮助。