纯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 相关文章推荐
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 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
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
php集成动态口令认证
2016/07/21 PHP
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
python写xml文件的操作实例
2014/10/05 Python
Python面向对象之继承代码详解
2018/01/29 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
Python如何根据时间序列数据作图
2020/05/12 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
Reformation官网:美国女装品牌
2018/09/14 全球购物
婚礼主持词开场白
2014/03/13 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
环保建议书范文
2015/09/14 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书