从内部外部函数中删除侦听器

Question

在 JS 中是否可以从别处描述的函数内部移除监听器，然后传递给监听器？

我希望这样的东西能起作用，但它不起作用（我的意思是 self.removeEventListener("blur", named, false); 行）。同时在调试模式下我看到 this 值被正确传递。

someElement.addEventListener("blur", function namedFunc() {handler(this)} ,false);

function handler(self) {
    self.removeEventListener("blur", namedFunc, false);
}

Answer 1

名称 namedFunction 仅可见 inside that function。因此，您需要将它传递给处理程序，以便稍后可以将其删除。

var someElement = document.getElementById('foo');

someElement.addEventListener('click', function namedFunc() {
    handler(this, namedFunc);
}, false);

function handler(self, fn) {
    alert('handler called');
    self.removeEventListener('click', fn, false);
}

<button id="foo">click me!</button>

Answer 2

您可以扩大处理程序的范围。

有关问题的详细解释，请参阅。

(function() {
  var someElement = document.getElementById('foo');

  // This function is visible anywhere in the IIFE
  // http://benalman.com/news/2010/11/immediately-invoked-function-expression/
  function handler(e) {
    alert('handler called');
    someElement.removeEventListener(handler);
  }
  someElement.addEventListener('click', handler, false);
})();

注意你做的事情是可以抽象的

function listenOnce(el, eventName, handler)  {
   var wrapper = function(e) {
       handler.apply(this, arguments);
       el.removeEventListener(eventName, wrapper);
   }
   el.addEventListener(eventName, wrapper, false);
}

listenOnce( document.getElementById('foo'), 'click', function() {
  alert('handler called');
});

从内部外部函数中删除侦听器

Removing listener from inside outer function

javascript

this

addeventlistener

dom-events