纯JavaScript实现的兼容各浏览器的添加和移除事件封装

 更新时间:2015年03月28日 10:41:58   投稿:junjie  
这篇文章主要介绍了纯JavaScript实现的兼容各浏览器的添加和移除事件封装,本文直接给出实现代码,代码中带详细注释,需要的朋友可以参考下
//事件处理兼容各种浏览器,采用能力检测方法,所谓能力检测,就是有能力就做,没有能力就不做
 
 //定义一个处理事件的对象,兼容各种浏览器,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;
    	  }
    }




 }

相关文章

  • localStorage过期时间设置的几种方法

    localStorage过期时间设置的几种方法

    聊到localStorage想必熟悉前端的朋友都不会陌生,在实际的应用场景中,我们往往需要让localStorage设置的某个key能在指定时间内自动失效,所以基于这种场景,我们如何去解决呢,本文就详细的介绍一下
    2021-12-12
  • JavaScript实现简易计算器案例

    JavaScript实现简易计算器案例

    这篇文章主要为大家详细介绍了JavaScript实现简易计算器案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下<BR>
    2022-07-07
  • JS Object构造函数之Object.freeze

    JS Object构造函数之Object.freeze

    这篇文章主要介绍了JS Object构造函数之Object.freeze,对JS感兴趣的同学,可以深入了解下
    2021-04-04
  • JS的参数传递示例介绍

    JS的参数传递示例介绍

    想必大家对参数传递并不陌生吧,本文为大家介绍下JS的参数传递,需要的朋友可以参考下
    2014-02-02
  • JavaScript鼠标拖动事件监听使用方法以及实例效果演示

    JavaScript鼠标拖动事件监听使用方法以及实例效果演示

    最近工作中遇到了鼠标拖动事件监听的相关需求,所以下面这篇文章主要给大家介绍了关于JavaScript鼠标拖动事件监听使用方法以及实例效果演示的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • JavaScript如何借用构造函数继承

    JavaScript如何借用构造函数继承

    这篇文章主要介绍了JavaScript如何借用构造函数继承,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • HTML中用JS实现旋转的圣诞树

    HTML中用JS实现旋转的圣诞树

    这篇文章介绍了HTML中用JS实现旋转的圣诞树,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-12-12
  • js实现表单提交后不重新刷新当前页面

    js实现表单提交后不重新刷新当前页面

    本文介绍了如何通过js实现表单提交后不重新刷新当前页面的方法实例.既提交了FORM保存了数据,页面也不会跳转,很实用。需要的朋友可以参考下
    2016-11-11
  • js版实现计算器功能

    js版实现计算器功能

    这篇文章主要为大家详细介绍了js版实现计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 检测一个函数是否是JavaScript原生函数的小技巧

    检测一个函数是否是JavaScript原生函数的小技巧

    这篇文章主要介绍了检测一个函数是否是JavaScript原生函数的小技巧,本文给出了两种检测方法,需要的朋友可以参考下
    2015-03-03

最新评论