js 实现一些跨浏览器的事件方法详解及实例
js实现一些跨浏览器的事件方法
用JavaScript实现事件的绑定，移除，以及一些常用的事件属性的获取，时常要考虑到在不同浏览器下的兼容性，下面给出了一个跨浏览器的事件对象：
varEventUtil={
on:function(element,type,handler){/*添加事件*/
if(element.addEventListener){
element.addEventListener(type,handler,false);
}elseif(element.attachEvent){//IE注意：此时事件处理程序会在全局作用域中运行，因此用attachEvent绑定的事件，此时在事件处理函数里的this等于window，使用时要注意
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=handler;
}
},
off:function(element,type,handler){/*移除事件*/
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}elseif(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
getEvent:function(event){/*返回对event对象的引用*/
returnevent?event:window.event;
},
getTarget:function(event){/*返回事件的目标*/
returnevent.target||event.srcElement;
},
preventDefault:function(event){/*取消事件的默认行为*/
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){/*阻止事件冒泡*/
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
},
/*mouseover和mouserout这两个事件都会涉及把鼠标指针从一个元素的边界之内移动到另一个元素的边界之内。*/
getRelatedTarget:function(event){
if(event.relatedTarget){
returnevent.relatedTarget;
}elseif(event.toElement){//IE8mouserout事件
returnevent.toElement;
}elseif(event.fromElement){//IE8mouseover事件
returnevent.fromElement;
}else{
returnnull;//其他事件
}
}
};
调用如下：
EventUtil.on(document,"click",function(event){//为document元素绑定click事件
event=EventUtil.getEvent(event);//获取event事件对象
alert("Screencoordinates:"+event.screenX+","+event.screenY);
});
文章参考自《JavaScript高级程序设计第三版》
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！