JavaScript事件對象EventUtil


  JS中事件對象有很多種,兼容性參差不齊,這個對象封裝了大部分所需的各種方法

var EventUtil={
    
   addHandler:function(element,type,handler){ //添加事件
      if(element.addEventListener){ 
         element.addEventListener(type,handler,false);  //使用DOM2級方法添加事件
      }else if(element.attachEvent){                    //使用IE方法添加事件
         element.attachEvent("on"+type,handler);
      }else{
         element["on"+type]=handler;          //使用DOM0級方法添加事件
      }
   },  

   removeHandler: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]=null;
      }
   },

   getEvent:function(event){  //使用這個方法跨瀏覽器取得event對象
      return event?event:window.event;
   },
    
   getTarget:function(event){  //返回事件的實際目標
      return event.target||event.srcElement;
   },
    
   preventDefault:function(event){   //阻止事件的默認行為
      if(event.preventDefault){
         event.preventDefault(); 
      }else{
         event.returnValue=false;
      }
   },

   stopPropagation:function(event){  //立即停止事件在DOM中的傳播
                                     //避免觸發注冊在document.body上面的事件處理程序
      if(event.stopPropagation){
         event.stopPropagation();
      }else{
         event.cancelBubble=true;
      }
   },
        
   getRelatedTarget:function(event){  //獲取mouseover和mouseout相關元素
      if(event.relatedTarget){
         return event.relatedTarget;
      }else if(event.toElement){      //兼容IE8-
         return event.toElement;
      }else if(event.formElement){
         return event.formElement;
      }else{
         return null;
      }
   },
        
   getButton:function(event){    //獲取mousedown或mouseup按下或釋放的按鈕是鼠標中的哪一個
      if(document.implementation.hasFeature("MouseEvents","2.0")){
         return event.button;
      }else{
         switch(event.button){   //將IE模型下的button屬性映射為DOM模型下的button屬性
            case 0:
            case 1:
            case 3:
            case 5:
            case 7:
               return 0;  //按下的是鼠標主按鈕(一般是左鍵)
            case 2:
            case 6:
               return 2;  //按下的是中間的鼠標按鈕
            case 4:
               return 1;  //鼠標次按鈕(一般是右鍵)
         }
      }
   },
        
   getWheelDelta:function(event){ //獲取表示鼠標滾輪滾動方向的數值
      if(event.wheelDelta){
         return event.wheelDelta;
      }else{
         return -event.detail*40;
      }
   },
        
   getCharCode:function(event){   //以跨瀏覽器取得相同的字符編碼,需在keypress事件中使用
      if(typeof event.charCode=="number"){
         return event.charCode;
      }else{
         return event.keyCode;
      }
   }
        
};

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM