纯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
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
JS获取当前日期和时间的简单实例
Nov 19 Javascript
jQuery中delegate与on的用法与区别示例介绍
Dec 20 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
node.js ws模块搭建websocket服务端的方法示例
Apr 25 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 FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
php中autoload的用法总结
2013/11/08 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
jQuery load方法用法集锦
2011/12/06 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
初步剖析C语言编程中的结构体
2016/01/16 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
Django框架多表查询实例分析
2018/07/04 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
Python字典底层实现原理详解
2019/12/18 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
python要安装在哪个盘
2020/06/15 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
抽奖活动主持词
2014/03/31 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
自荐信模板大全
2015/03/27 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
音乐研修感悟
2015/11/18 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
mysql函数全面总结
2021/11/11 MySQL