removeEventListener из тела не работает

Question

Я пытаюсь удалить прослушиватель событий после вызова функции. Но прослушиватель событий для «keyup» остается прикрепленным к телу, независимо от того, что я пытаюсь. Что не так с кодом?

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, диспетчер событий не находит его, потому что он зарегистрировал его копию и, следовательно, ничего не удалено: - /.

EDIT:

В вашем случае, я думаю, у вас нет другого выбора, кроме отслеживания ваших слушателей. Я пошел вперед и сделал это быстро, это должно решить вашу проблему.

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