removeEventListener不工作

Question

我試圖刪除事件偵聽器的函數調用後。但是，無論我嘗試什麼，「密碼」的事件監聽器都會附着在身體上。代碼有什麼問題？

function displayImage() { 
    //this is a simplified version of the code 
    var outerFrame = document.createElement('div'); 

    outerFrame.className = 'popup-outer'; 

    document.body.appendChild(outerFrame); 

    document.body.addEventListener('keyup', hideImage.bind(outerFrame), false); 
} 

function hideImage(e) { 
    if (e.keyCode === 27) { 
    // this doesn't work, it stays attached to the body element 
    document.body.removeEventListener('keyup', hideImage, false); 
    document.body.removeChild(this); 
    } 

    e.preventDefault(); 
} 

Answer 1

這是因爲從技術上

hideImage.bind(outerFrame) 

是

hideImage 

不同，因爲第一個返回函數hideImage的副本。

所以，當你試圖解除綁定hideImage，事件管理器不會因爲它registred它的一個副本，因此沒有被刪除找到它： - /。

編輯：

在你的情況，我想你沒有其他選擇，但你的聽衆的跟蹤。我繼續前進並迅速完成，它應該解決您的問題。

var listeners = {}; 

    function createDiv() { 
     var outerFrame = document.createElement('div'); 
     outerFrame.className = 'popup-outer'; 
     return outerFrame; 
    } 

    function displayImage() { 
     var div = createDiv(); 
     bindEvent(div); 
     document.body.appendChild(div); 
    } 

    function bindEvent(el) { 
     var handler = function(e) { 
      hideImg.call(el, e); 
     } 
     listeners[el] = handler; 
     document.body.addEventListener('keyup', handler, false); 
    } 

    function hideImg(e) { 
     if (e.keyCode === 27) { 
      // listeners[this] refers to the "private" handler variable we created in the bindEvent function 
      document.body.removeEventListener('keyup', listeners[this], false); 
      delete listeners[this]; 
      document.body.removeChild(this); 
     } 
    } 

的