取消綁定匿名函數

Question

有人可以告訴如何「取消綁定」匿名函數嗎？ JQUERY它能夠做到這一點，但我怎樣才能在我自己的腳本中實現這個功能。

這是情景：

下面的代碼附加的「onClick」事件到DIV具有「someDivId」爲ID，現在聞您單擊DIV，它顯示「點擊！」。

var a = document.getElementById('someDivId'); 
bindEvent(a,'click',function(){alert('clicked!');}); 

這是所有偉大的，問題是如何「取消附加」功能的DIV如果函數是匿名的或如何「取消附加」所有連接事件的「a」元素？

unBind(a,'click'); //Not necessarily the given params, it's just an example. 

這是bindEvent方法的代碼：

function bindEvent (el,evtType,fn){ 
    if (el.attachEvent) { 
     el['e'+evtType+fn] = fn; 
     el[evtType+fn] = function(){ 
      fn.call(el,window.event); 
     } 
     el.attachEvent('on'+evtType, el[evtType+fn]); 
    } else { 
     el.addEventListener(evtType, fn, false); 
    } 
} 

Answer 1

最後，經過測試&錯誤的時間我已經找到了解決辦法，也許它不是最好的，最有效的。但它作品！ （測試IE9，Firefox 12，Chrome 18）

首先我們創建兩個跨瀏覽器和輔助的addEvent（）和removeEvent（）方法。 （來自Jquery源代碼的想法！）

HELPERS.removeEvent = document.removeEventListener ? 
function(type, handle,el) { 
    if (el.removeEventListener) { 
    //W3C Standard  
    el.removeEventListener(type, handle, true); 
    } 
} : 
function(type, handle,el) { 
    if (el.detachEvent) { 
     //The IE way 
     el.detachEvent('on'+type, el[type+handle]); 
     el[type+handle] = null; 
    } 
}; 

HELPERS.addEvent = document.addEventListener ? 
function(type, handle,el) { 
    if (el.addEventListener) { 
     //W3C Standard 
     el.addEventListener(type, handle, true); 
    } 
} : 
function(type, handle,el) { 
    if (el.attachEvent) { 
     //The IE way 
     el['e'+type+handle] = handle; 
     el[type+handle] = function(){ 
      handle.call(el,window.event); 
     }; 
     el.attachEvent('on'+type, el[type+handle]); 

    } 
} 

同時，我們也需要一些「容器」來存儲連接事件的元素，像這樣：

HELPERS.EVTS = {}; 

最後兩個調用並暴露用戶的方法： 下一個添加事件（事件）並將該事件關聯到特定元素（el）的方法（處理程序）。

function bindEvent(event, handler,el) { 

      if(!(el in HELPERS.EVT)) { 
       // HELPERS.EVT stores references to nodes 
       HELPERS.EVT[el] = {}; 
      } 

      if(!(event in HELPERS.EVT[el])) { 
       // each entry contains another entry for each event type 
       HELPERS.EVT[el][event] = []; 
      } 
      // capture reference 
      HELPERS.EVT[el][event].push([handler, true]); 
      //Finally call the aux. Method 
      HELPERS.addEvent(event,handler,el); 

     return; 

    } 

最後，對於一個特定元素（EL）每一個預安裝的事件（事件）

function removeAllEvent(event,el) { 

      if(el in HELPERS.EVT) { 
       var handlers = HELPERS.EVT[el]; 
       if(event in handlers) { 
        var eventHandlers = handlers[event]; 
        for(var i = eventHandlers.length; i--;) { 
         var handler = eventHandlers[i]; 
         HELPERS.removeEvent(event,handler[0],el); 

        } 
       } 
      } 

    return; 

    } 

未連接順便說一句，調用這個方法，你必須執行以下操作方法： 捕獲一個DOM節點

var a = document.getElementById('some_id'); 

調用方法 'bindEvent（）' 與相應的參數。

bindEvent('click',function(){alert('say hi');},a); 

並以去其附加：

removeAllEvent('click',a); 

這一切，希望將某人1天有用。

Answer 2

個人（我知道這是不是「最好」的方式，因爲它需要我去思考我在做什麼），我喜歡使用正在處理的元素的on*事件屬性。

這有方便的快速和容易地分離事件的好處。

var a = document.getElementById('someDivId'); 
a.onclick = function() {alert("Clicked!");}; 
// later... 
a.onclick = null; 

但是，您必須小心，因爲如果您嘗試添加第二個事件處理程序它將覆蓋第一個。記住這一點，你應該沒問題。

Answer 3

這是jQuery的source：

jQuery.removeEvent = document.removeEventListener ? 
    function(elem, type, handle) { 
     if (elem.removeEventListener) { 
      elem.removeEventListener(type, handle, false); 
     } 
    } : 
    function(elem, type, handle) { 
     if (elem.detachEvent) { 
      elem.detachEvent("on" + type, handle); 
     } 
    }; 

Answer 4

我不知道你是否能解除綁定通過JavaScript附加一個匿名函數。如果可能，您可以簡單地從DOM中移除元素並重新創建它。這將消除以前附加的任何事件處理程序。

Answer 5

JavaScript不提供附加到節點的事件偵聽器的列表。

您可以刪除一個節點的所有事件監聽器，但使用的Node.cloneNode方法，在這裏看到：https://developer.mozilla.org/En/DOM/Node.cloneNode

這個克隆節點（明顯），但它並不克隆附着的事件偵聽器。

你也只是結合空函數作爲事件偵聽器：

function noop() {} 
bindEvent(myElement, "click", noop);