纯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的面向对象(二)
Nov 09 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
送你43道JS面试题(收藏)
Jun 17 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 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
yii去掉必填项中星号的方法
2015/12/28 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
使用PYTHON创建XML文档
2012/03/01 Python
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
Python中编写ORM框架的入门指引
2015/04/29 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
python opencv实现证件照换底功能
2019/08/19 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
国情备忘录观后感
2015/06/04 职场文书
小学语文教学反思范文
2016/03/03 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
 python中的元类metaclass详情
2022/05/30 Python