1. 程式人生 > >JavaScript事件對象EventUtil

JavaScript事件對象EventUtil

asf rem function src form 屬性 處理程序 elb top

  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; } } };

JavaScript事件對象EventUtil