纯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 相关文章推荐
JavaScript 学习笔记(四)
Dec 31 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
详解小程序缓存插件(mrc)
Aug 17 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
vue3.0生命周期的示例代码
Sep 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小马小结(方便查找后门的朋友)
2012/05/05 PHP
php变量范围介绍
2012/10/15 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
浅谈PHP的反射API
2017/02/26 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
js 函数的副作用分析
2011/08/23 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
以windows service方式运行Python程序的方法
2015/06/03 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
Python json转字典字符方法实例解析
2020/04/13 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
nohup的用法
2014/08/10 面试题
求职信怎么写范文
2014/05/26 职场文书
2014年车间工作总结
2014/11/21 职场文书
springboot用户数据修改的详细实现
2022/04/06 Java/Android