纯JavaScript实现的兼容各浏览器的添加和移除事件封装


Posted in Javascript onMarch 28, 2015
//事件处理兼容各种浏览器,采用能力检测方法,所谓能力检测,就是有能力就做,没有能力就不做
 
 //定义一个处理事件的对象,兼容各种浏览器,dom2级事件处理和ie事件,如果这两个事件都不兼容,就采用dom0级处理
 var eventUtil ={
    addEvent:function(element,type,handler){
      if (element.addEventListener) {
      	//非IE浏览器采用dom2级事件处理,type为事件类型如:click,handler为事件处理函数,false代表事件采用冒泡处理模型,如果是true代表 采用捕获型处理模型
      	//除了netbeans采用捕获型处理模型,其他都采用冒泡型处理模型
      	//如果是非IE浏览器添加事件为:addEventListener
      	element.addEventListener(type,handler,false);
      }else if (element.attachEvent) {
      	//如果为IE浏览器,添加事件采用 attachEvent
      	element.attachEvent('on'+type,handler);
      }else{
        element['on'+type] = handler;
      }
    },
    removeEvent:function(element,type,handler){
      if (element.removeEventListener) {
      	//非IE浏览器采用dom2级事件处理,type为事件类型如:click,handler为事件处理函数,false代表事件采用冒泡处理模型,如果是true代表 采用捕获型处理模型
      	//除了netbeans采用捕获型处理模型,其他都采用冒泡型处理模型
      	//如果是非IE浏览器添加事件为:removeEventListener
      	element.removeEventListener(type,handler,false);
      }else if (element.detachEvent) {
      	//如果为IE浏览器,添加事件采用 detachEvent
      	element.detachEvent('on'+type,handler);
      }else{
      	//dom0级事件处理,如果删除事件采用赋值null
        element['on'+type] = null;
      }
    },
    getEvent:function(event){
    	  //获取事件本身
    	 return event?event:window.event;
    },
    getType:function(event){
    	 //获取事件类型
    	 return event.type;
    },
    getElement:function(event){
    	 //获取事件作用元素
    	 return event.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;
    	  }
    }




 }
Javascript 相关文章推荐
JS 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
Jquery中map函数的用法
Jun 03 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 #Javascript
JQuery调用绑定click事件的3种写法
Mar 28 #Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 #Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 #Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 #Javascript
JavaScript中的函数声明和函数表达式区别浅析
Mar 27 #Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 #Javascript
You might like
世界收音机发展史
2021/03/01 无线电
php正则校验用户名介绍
2008/07/19 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
分享8个Laravel模型时间戳使用技巧小结
2020/02/12 PHP
IE8 中使用加速器(Activities)
2010/05/14 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
python写的一个squid访问日志分析的小程序
2014/09/17 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
Python交互环境下实现输入代码
2018/06/22 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
phpquery中文手册
2021/03/18 PHP
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
怀念母亲教学反思
2014/04/28 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
公司宣传语大全
2015/07/13 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL
配置Kubernetes外网访问集群
2022/03/31 Servers