纯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进阶教程(第四课第一部分)
Apr 05 Javascript
<script defer> defer 是什么意思
May 10 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
javascript实现行拖动的方法
May 27 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
对node.js中render和send的用法详解
May 14 Javascript
js实现点赞效果
Mar 16 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 unset全局变量运用问题的深入解析
2013/06/17 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
Python中装饰器高级用法详解
2017/12/25 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
Python的历史与优缺点整理
2020/05/26 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
合伙经营协议书范本
2014/09/13 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
介绍信怎么写
2015/05/05 职场文书
民事纠纷协议书
2016/03/23 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
Redis Lua脚本实现ip限流示例
2022/07/15 Redis