纯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 相关文章推荐
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
让textarea自动调整大小的js代码
Apr 12 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
vue v-on:click传递动态参数的步骤
Sep 11 Javascript
vue postcss-px2rem 自适应布局
May 15 Vue.js
JavaScript架构搭建前端监控如何采集异常数据
Jun 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中的加密功能
2006/10/09 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
JS控制表格隔行变色
2006/06/26 Javascript
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
express异步函数异常捕获示例详解
2020/11/30 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python下10个简单实例代码
2017/11/15 Python
python框架中flask知识点总结
2018/08/17 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
python调用c++传递数组的实例
2019/02/13 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
什么是Assembly(程序集)
2014/09/14 面试题
毕业生精彩的自我评价分享
2013/10/06 职场文书
单位创先争优活动方案
2014/01/26 职场文书
幼儿园门卫制度
2014/01/29 职场文书
师德师风建设方案
2014/05/08 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
学校德育工作总结2015
2015/05/11 职场文书
python简单验证码识别的实现过程
2021/06/20 Python
python代码实现扫码关注公众号登录的实战
2021/11/01 Python