Удаление слушателя из внутренней внешней функции

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

Вы можете расширить возможности вашего обработчика.

См. Yoshi's post для правильного объяснения проблемы.

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