纯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 相关文章推荐
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
js获取图片大小的函数代码
Sep 20 Javascript
javascript判断机器是否联网的2种方法
Aug 09 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
node中实现删除目录的几种方法
Jun 24 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
php实现的Cookies操作类实例
2014/09/24 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
基于vue2实现左滑删除功能
2017/11/28 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
Python实现元素等待代码实例
2019/11/11 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
初三化学教学反思
2014/01/23 职场文书
学校元旦晚会方案
2014/02/19 职场文书
公司募捐倡议书
2014/05/14 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
机关作风建设心得体会
2014/10/22 职场文书
综治维稳工作汇报
2014/10/27 职场文书
驻村工作简报
2015/07/20 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
浅谈Python响应式类库RxPy
2021/06/14 Python
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers