DIV CSS 佈局教程網

大家都知道，IE中的現代事件綁定（attachEvent）與W3C標准的（addEventListener）相比存在很多問題，

例如：內存洩漏，重復添加事件並觸發的時候是倒敘執行等。

下面是用傳統事件的方法來處理封裝事件的綁定：

addEvent.ID = 1;    // 事件計數器
  function addEvent(obj, type, fn){
    if(obj.addEventListener){
      obj.addEventListener(type, fn, false);
    } else {    // IE
      // 判斷對象是否存在，保證只有一個對象，否則每執行一次，會創建一個事件對象
      // 以鍵值對的形式儲存類型與函數的一個數組,=======將事件對象數組掛載到obj對象是為

了方便事件的刪除
      if( !obj.events){
        // 相當於結構為：obj.events : {click:[fn1,fn2], mouserover:[fn1], ...}
        obj.events = {};
      }
      var flag = false;
      // 存儲事件對象
      if( !obj.events[type]){
        // 類型數據儲存挨個函數
        obj.events[type] = [];
        // 該類型的第一次事件類型及函數儲存到該類型數組中的第一位
        obj.events[type][0] = fn;
      } else {
        var eventfn = obj.events[type];
        // 循環遍歷該類型對象查詢該事件是否重復，如果重復flag為true，並return返回
        for(var i in eventfn){
          if(eventfn[i] == fn ){
            flag = true;
            return;
          }
        }
        // 判斷該事件是否重復，重復的話就不進行事件的函數的存儲，否則儲存該事件並執行
        if( !flag ){
          // 當該類型已經存在了，將為該事件進行累計時間類型函數存儲，最後循環執行
          eventfn[addEvent.ID++] = fn;
        }

      }

      // 事件函數 類型數組 函數遍歷調用
      obj["on"+type] = function(){
        var event = window.event;  // 事件對象的儲存

        // 在事件對象後添加函數，當執行的時候調用，並阻止默認行為的發生，與W3C標准同步
        event.preventDefault = function(){
          this.returnValue = false;
        };
        // 在事件對象後面添加函數，一個尾巴函數，停止冒泡。
        event.stopPropagation = function(){
          this.cancelBubble = true;
        };

        // 循環遍歷執行類型儲存的多個函數
        var evfn = obj.events[type];
        for(var i in evfn){
          // 順序執行該類型的事件函數，解決了傳統事件的覆蓋問題和現代事件綁定的逆序觸發

事件的問題
          evfn[i].call(this, event);   // 將執行函數放置在該對象的環境下執行,並傳遞一個事件對

象給函數回調使用
        }
      }

    }
  }


  function removeEvent(obj, type, fn){
    if(obj.removeEventListener){
      obj.removeEventListener(type, fn, false);
    } else {
      // 循環遍歷該對象下該類型的事件函數是否函數該函數，如果有就將該事件函數刪除
      var evefn = obj.events[type];
      for(var i in evefn){
        if(evefn[i] == fn){
          // delete evefn[i]; 該方法也可以刪除該數組的該項，但是會保留該位置當訪問的時候值

為undefined
          evefn.splice( i, 1); // 從第i的位置刪除1位，
        }
      }

    }
  }

以上所述就是本文的全部內容了，希望大家能夠喜歡。