纯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针对DOM的应用实例(一)
Apr 15 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
js瀑布流布局的实现
Jun 28 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
php中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
对python的文件内注释 help注释方法
2018/05/23 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
Python如何实现爬取B站视频
2020/05/20 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
捐书活动总结
2014/05/04 职场文书
商业街策划方案
2014/05/31 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
个人政治思想总结
2015/03/05 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
win10更新失败无限重启解决方法
2022/04/19 数码科技