纯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异步调用页面后台方法‏(asp.net)
Mar 01 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 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
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
非常不错的MySQL优化的8条经验
2008/03/24 PHP
php array_map()数组函数使用说明
2011/07/12 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
php动态变量定义及使用
2015/06/10 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
PHP实现文件上传与下载
2020/08/28 PHP
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
python从子线程中获得返回值的方法
2019/01/30 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
python自动化办公操作PPT的实现
2021/02/05 Python
HTML5 Web 存储详解
2016/09/16 HTML / CSS
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
EJB的角色和三个对象
2015/12/31 面试题
服务宗旨标语
2014/07/01 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
酒会邀请函
2015/01/31 职场文书
事业单位个人总结
2015/02/12 职场文书
入党转正申请报告
2015/05/15 职场文书
污染环境建议书
2015/09/14 职场文书