JS事件添加和移出的兼容寫法示例

更新時間：2016年06月20日 11:19:24 作者：cherry

這篇文章主要介紹了JS事件添加和移出的兼容寫法,結(jié)合實例形式分析了javascript針對不同瀏覽器實現(xiàn)實現(xiàn)添加與移除事件的相關(guān)技巧與使用方法,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了JS事件添加和移出的兼容寫法。分享給大家供大家參考，具體如下：

var EventUtil = {
  addHandler : function (element , type, handler {
     if ( element.addEventListener){
        element.addEventListener(type, handler, false);
      }else if ( element.attachEvent) {
        element.attachEvent("on"+type,handler);
      }else {
         element["on" + type] = handler;
      }
    },
  getEvent : function (event){
      return event ? event : window.event;
     },
   preventDefault : function(event){
      if(event.preventDefault){
         event.preventDefault();
      }else{
         event.returnValue = false;
      }
   },
  removeHandsler : function (element , type , handler){
     if(element.removeEventListener){
         element.removeEventListener(type , handler , false);
     }else if(element.detachEvent){
         element.detachEvent("on" + type , handler);
     }else{
         element["on" + type] = handler;
     }
    }
   stopPropagation : function(event){
      if(event.stopPropagation){
         event.stopPropagation();
      }else {
          event.cancelBubble = true;
      }
    },
   getRelatedTarget : function(event){
      if(event.relatedTarget){
          return event.relatedTarget;
      }else if (event.toElement){
          return event.toElement;
      }else if(event.fromElement){
          return event.fromElement;
      }esle {
          return null;
       }
    },
    getButton : function (event){
       if(document.implementation.hasFeature("MouseEvents" , "2.0")){
          return event.button;
       }else{
           switch(event.button){
             case 0:
             case 1:
             case 3:
             case 5:
             case 7:
               return 0;
             case 2:
             case 6:
               return 2;
             case 4:
               return 1;
            }
        }
     }
} ;

其中,addHandler 和 removeHandsler 個方法首先都會檢測傳入的元素中是否存在DOM2級方法.如果存在DOM2級方法,則使用該方法:傳入事件類型,事件處理程序函數(shù)和第三個參數(shù)fasle(表示冒泡階段). 如果存在的是IE的方法,則采取第二種方案.注意此時的事件類型必須加上"on"前綴.最后一種可能就是使用DOM0級方法(在現(xiàn)代瀏覽器中,應(yīng)該不會執(zhí)行這里的代碼). 此時,我們使用的是方括號語法來將屬性名指定為事件處理程序,或者將屬性設(shè)置為null.

可以像下面這樣使用EventUtil對象:

var btn = document.getElementById("myBtn");
var handler = function(){
  alert("Clicked");
};
EventUtil.addHandler(btn , "click", handler);
//略去其他代碼
EventUtil.removeHandler(btn, "click", handler);

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: