京品吉橡胶强人线缆有限公司

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

2015-03-29  来源: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; 
          } 
    } 
   }
(责编:远方)
关键词: 事件封装

声明:原文出自//article.nxpop.com/js/2015-03-29/284.html ,文章观点仅代表原作者,转载请注明出处。

新网巢是非商业性和非盈利性的个人运营网站,文章仅供个人站长及爱好者学习交流使用,如涉及侵权,烦请告知,以便及时删除。

已有条评论
匿名评论

用微信扫一扫

新网巢