纯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 相关文章推荐
游戏人文件夹程序 ver 3.0
Jul 14 Javascript
window.js 主要包含了页面的一些操作
Dec 23 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
JS实现拖动示例代码
Nov 01 Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
jquery插件orbit.js实现图片折叠轮换特效
Apr 14 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
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 array的学习笔记
2012/05/16 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
vue组件间通信解析
2017/03/01 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
详解python datetime模块
2020/08/17 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
本科生求职简历的自我评价
2013/10/21 职场文书
电大会计学自我鉴定
2014/02/06 职场文书
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL