DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> Javascript添加監聽與刪除監聽用法詳解
Javascript添加監聽與刪除監聽用法詳解
編輯:JavaScript綜合知識     

 js中事件監聽就是利用addEventListener來綁定一個事件,這個用法在jquery中非常常用並且簡單,但在原生js中比較復雜,這裡整理了addEventListener事件各方法的測試與例子供大家參考學習。

在前兩天做播放器的時候添加監聽後刪除監聽遇到了一點麻煩,刪不掉,後來看了一下才發現,參數需要完全對應,什麼叫完全對應呢,換句話說:

代碼如下: $('.video')[0].addEventListener('timeupdate', currentTimeHandler, true);


比如這句,需要傳入三個參數,這樣才能夠刪除,為什麼一定要這樣,沒錯,蛋疼的地方就在這裡:
在add和remove時,第三個參數確實可以不寫,但此時他們的默認情況是不一樣的!!

 

通常情況下addEventListener是false…
1、 添加自定義事件監聽

代碼如下: var eventHandlesCounter=1;//統計添加事件監聽的個數,0作為預留位
    function addEvent(obj,evt,fn){
       if(!fn.__EventID){ fn.__EventID=eventHandlesCounter++;}
       if(!obj.__EventHandles){ obj.__EventHandles=[]; }
       if(!obj.__EventHandles[evt]){
           obj.__EventHandles[evt]=[];
           if(obj["on"+evt] instanceof Function){
              obj.__EventHandles[evt][0]=obj["on"+evt];
              obj["on"+evt]=handleEvents;
           }
       }
       obj.__EventHandles[evt][fn.__EventID]=fn;
 
       function handleEvents(){
         var fns = obj.__EventHandles[evt];
         for (var i=0;i<fns.length;i++)
            fns[i].call(this);
       }
}


2、自定義刪除事件監聽

代碼如下: function delEvent(obj,evt,fn){
   if(!obj.__EventHandles || !obj.__EventHandles[evt] || !fn.__EventID){
      return false;
   }
   if(obj.__EventHandles[evt][fn.__EventID]==fn){
      delete obj.__EventHandles[evt][fn.__EventID];
   }
}


3. 對上述方法進行修正

代碼如下: function addEvent(obj,evt,fn,useCapture){
    if(obj.addEventListener){//優先使用W3C事件注冊
       obj.addEventListener(evt,fn,!!useCapture);
    }else{
       if(!fn.__EventID){fn.__EventID = addEvent.__EventHandlesCounter++;}
       if(!obj.__EventHandles){ obj.__EventHandles=[];}
       if(!obj.__EventHandles[evt]){
           obj.__EventHandles[evt]=[];
           if(obj["on"+evt]){
              (obj.__EventHandles[evtype][0]=obj["on"+evtype]).__EventID=0;
           }
           obj["on"+evtype]=addEvent.execEventHandles;
       }
    }
}
addEvent.__EventHandlesCounter=1;
addEvent.execEventHandles = function(evt){
    if(!this.__EventHandles) {return true;}
    evt = evt || window.event;
    var fns = this.__EventHandles[evt.type];
    for (var i=0;i<fns.length;i++){
       if(fns[i] instanceof Function){
           fns[i].call(this);
       }
    }
};
function delEvent(obj,evt,fn,useCapture){
   if (obj.removeEventListener) {//先使用W3C的方法移除事件處理函數        
       obj.removeEventListener(evt,fn,!!useCapture);
   }else {
      if(obj.__EventHandles){
         var fns = obj.__EventHandles[evt];
         if(fns){delete fns[fn.__EventID];}
      }
}


4、標准化事件對象

代碼如下: function fixEvent(evt){
   if(!evt.target){
      evt.target = evt.srcElement;
      evt.preventDefault=fixEvent.preventDefault;
      evt.stopPropagation = fixEvent.stopPropagation;
      if(evt.type == "mouseover"){
         evt.relatedTarget = evt.fromElement;
      }else if(evt.type == "mouseout"){
         evt.relatedTarget = evt.toElement;
      }
      evt.charCode =(evt.type == "keypress")?evt.keyCode:0;
      evt.eventPhase = 2;
      evt.timeStamp = (new Date()).getTime();
   }
return evt;
}
fixEvent.preventDefault=function(){ this.returnValue=false;}
fixEvent.stopPropagation=function(){this.cancelBubble = true;};

 

fixEvent函數不是單獨執行的,它必須有一個事件對象參數,而且只有事件發生時它才被執行!最好的方法是把它整合到addEvent函數的execEventHandles裡面。

代碼如下: addEvent.execEventHandles = function (evt) {//遍歷所有的事件處理函數並執行
if (!this.__EventHandles) {return true;}
evt = fixEvent(evt || window.event);//在這裡對其進行標准化操作
var fns = this.__EventHandles[evt.type];
for (var i=0;i< fns.length;i++) {
if (fns[i] instanceof Function) {
fns[i].call(this,evt);//並且將其作為事件處理函數的第一個參數
//這樣在事件處理函數內部就可以使用統一的方法訪問事件對象了 } } };

 

上面是高手寫了,下面整理幾個實際的監聽事情的例子

代碼如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test6.html</title>
 <script type="text/javascript">
  function test(){
   window.alert("您投了一次票");
   document.getElementById("1").detachEvent("onclick",test);
  }
 </script>
  </head>
 
  <body>
    <input type="button" value="投票" id="1"/>
    <script type="text/javascript">
     document.getElementById("1").attachEvent("onclick",test);
    </script>
  </body>
</html>


這裡使用document.getElementById("1").attachEvent("onclick",test);進行動態的事件綁定,使用

代碼如下:
document.getElementById("1").detachEvent("onclick",test)

進行動態的時間的取消,這樣就實現了這個事件只能相應一次,下次再點擊這個按鈕的時候就不會再產生什麼效果。
下面再演示一個時時監聽鍵盤事件,判斷輸入的是否是數字,如果不是數字直接動態提示,然後拒絕其輸入

復制代碼 代碼如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test7.html</title>
 <script type="text/javascript">
  function test(event){
   //用戶每按下一個按鍵,就去判斷是不是數字
   if(event.keyCode<48 || event.keyCode > 57){
    window.alert("您輸入的不是一個數字");
    return false;
   }
  }
 </script>
  </head>
 
  <body>
    <input type="text" onkeypress="return test(event);" />請輸入數字
  </body>
</html>


這裡的event就是一個事件對象,他能返回很多的信息,具體請參考相關文檔。
 
補充:事件監聽方面的兼容

 

1. IE使用attachEvent/detachEvent方法來添加和刪除事件監聽器;w3c使用addEventListener/removeEventListener方法。
2. IE對其事件使用onevent的命名方式,而w3c的是event的命名方式。
3. IE事件監聽器內使用的是一個全局的Event對象,而w3c是將event對象作為參數傳遞給監聽器。
4. 為了避免觸發默認的事件行為,IE的做法是要求程序員設置Event對象中的returnValue屬性值為false,而w3c的做法是執行preventDefault方法。
5. IE沒有提供對事件捕獲階段的支持。
6. 要停止事件的傳遞,IE的做法是設置event對象的cancelBubble為true,而w3c的做法是設置執行stopPropagation方法。
7. IE將事件監聽器當做一個獨立的函數來調用,而w3c中它是作為對象的方法來調用的,這表示在ie中事件監聽器中的this關鍵字指向的不是事件發生對象而是一個沒用的全局對象(window對象)。
8. IE在使用事件監聽器方面存在內存洩露問題。在IE浏覽器中,如果要為某個元素創建一個事件監聽器,並且在監聽器中使用該元素,則在用戶進入其他頁面之前,該監聽器以及相關的DOM節點作占據的內存空間不會被釋放。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved