javascript - 从主体中删除事件监听器不起作用

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 的副本。

因此，当您尝试取消绑定(bind) hideImage 时，事件管理器找不到它，因为它注册了它的副本，因此没有删除任何内容:-/。

编辑:

就您而言，我想您除了跟踪听众之外别无选择。我很快就做了这个，它应该可以解决你的问题。

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