纯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 相关文章推荐
jQuery中live方法的重复绑定说明
Oct 21 Javascript
js如何获取file控件的完整路径具体实现代码
May 15 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 Javascript
详解A标签中href=""的几种用法
Aug 20 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 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面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
js与C#进行时间戳转换
2014/11/14 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
Python 3.x 新特性及10大变化
2015/06/12 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
python自动化生成IOS的图标
2018/11/13 Python
python获取中文字符串长度的方法
2018/11/14 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
大学生学习生活的自我评价
2013/11/01 职场文书
大学军训感言400字
2014/03/11 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
毕业生个人自荐书
2015/03/05 职场文书
干部考核工作总结
2015/08/12 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技