博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
跨浏览器的事件对象——EventUtil
阅读量:6968 次
发布时间:2019-06-27

本文共 2636 字,大约阅读时间需要 8 分钟。

EventUtil是为了平衡不同浏览器间实现事件的差异或事件方法的差异而存在的

var EventUtil={       addHandler:function(element,type,handler){ //添加事件      if(element.addEventListener){          element.addEventListener(type,handler,false);  //使用DOM2级方法添加事件      }else if(element.attachEvent){                    //使用IE方法添加事件         element.attachEvent("on"+type,handler);      }else{         element["on"+type]=handler;          //使用DOM0级方法添加事件      }   },     removeHandler:function(element,type,handler){  //取消事件      if(element.removeEventListener){         element.removeEventListener(type,handler,false);      }else if(element.detachEvent){         element.detachEvent("on"+type,handler);      }else{         element["on"+type]=null;      }   },   getEvent:function(event){  //使用这个方法跨浏览器取得event对象      return event?event:window.event;   },       getTarget:function(event){  //返回事件的实际目标      return event.target||event.srcElement;   },       preventDefault:function(event){   //阻止事件的默认行为      if(event.preventDefault){         event.preventDefault();       }else{         event.returnValue=false;      }   },   stopPropagation:function(event){  //立即停止事件在DOM中的传播                                     //避免触发注册在document.body上面的事件处理程序      if(event.stopPropagation){         event.stopPropagation();      }else{         event.cancelBubble=true;      }   },           getRelatedTarget:function(event){  //获取mouseover和mouseout相关元素      if(event.relatedTarget){         return event.relatedTarget;      }else if(event.toElement){      //兼容IE8-         return event.toElement;      }else if(event.formElement){         return event.formElement;      }else{         return null;      }   },           getButton:function(event){    //获取mousedown或mouseup按下或释放的按钮是鼠标中的哪一个      if(document.implementation.hasFeature("MouseEvents","2.0")){         return event.button;      }else{         switch(event.button){   //将IE模型下的button属性映射为DOM模型下的button属性            case 0:            case 1:            case 3:            case 5:            case 7:               return 0;  //按下的是鼠标主按钮(一般是左键)            case 2:            case 6:               return 2;  //按下的是中间的鼠标按钮            case 4:               return 1;  //鼠标次按钮(一般是右键)         }      }   },           getWheelDelta:function(event){ //获取表示鼠标滚轮滚动方向的数值      if(event.wheelDelta){         return event.wheelDelta;      }else{         return -event.detail*40;      }   },           getCharCode:function(event){   //以跨浏览器取得相同的字符编码,需在keypress事件中使用      if(typeof event.charCode=="number"){         return event.charCode;      }else{         return event.keyCode;      }   }        };

 

转载于:https://www.cnblogs.com/feilu2016/p/6971833.html

你可能感兴趣的文章
将一些类型设计成集合模式
查看>>
吉林艺术学院监考人员被指为考生改画 学校回应
查看>>
为什么程序员应该有一台 Mac 个人电脑
查看>>
iOS 开发中 runtime 常用的几种方法
查看>>
JS执行机制(浏览器事件环 vs Node事件环)
查看>>
树形数据结构总结一(堆,Trie,并查集)
查看>>
企业上云的四个阶段
查看>>
九、 一个简单的播放器(各自同步)
查看>>
一步一图,带你了解分布式架构的前世今生!
查看>>
转行程序员深漂的这三年 #3
查看>>
[转载]责任链模式
查看>>
揭秘!双11万亿流量下的分布式缓存系统 Tair
查看>>
[译] iPhone X 网页设计
查看>>
webpack入门及踩坑应对指南
查看>>
对于数据库优化的理解
查看>>
python学习三:列表、元组、字典、集合
查看>>
Netty 框架总结「ChannelHandler 及 EventLoop」
查看>>
Linux 下启动 Tomcat 抛出Can't connect to X11 window server 问题的解决方法
查看>>
Hexo博客NexT主题美化之显示当前浏览进度
查看>>
java版b2b2c社交电商spring cloud分布式微服务(七)springboot开启声明式事务
查看>>