function doSomethingWith(param)
{
document.body.addEventListener(
'scroll',
function()
{
document.write(param);
},
false
); // An event that I want to remove later
}
setTimeout(
function()
{
document.body.removeEventListener('scroll', HANDLER ,false);
// What HANDLER should I specify to remove the anonymous handler above?
},
3000
);
doSomethingWith('Test. ');
88
Respostas:
Você não pode. Você deve usar uma função nomeada ou armazenar a referência de alguma forma.
var handler; function doSomethingWith(param) { handler = function(){ document.write(param); }; document.body.addEventListener('scroll', handler,false); } setTimeout(function() { document.body.removeEventListener('scroll', handler ,false); }, 3000);
O melhor seria fazer isso de forma estruturada, para que você possa identificar diferentes manipuladores e removê-los. No exemplo acima, você obviamente só poderia remover o último manipulador.
Atualizar:
Você pode criar seu próprio manipulador (:)):
var Handler = (function(){ var i = 1, listeners = {}; return { addListener: function(element, event, handler, capture) { element.addEventListener(event, handler, capture); listeners[i] = {element: element, event: event, handler: handler, capture: capture}; return i++; }, removeListener: function(id) { if(id in listeners) { var h = listeners[id]; h.element.removeEventListener(h.event, h.handler, h.capture); delete listeners[id]; } } }; }());
Então você pode usá-lo com:
function doSomethingWith(param) { return Handler.addListener(document.body, 'scroll', function() { document.write(param); }, false); } var handler = doSomethingWith('Test. '); setTimeout(function() { Handler.removeListener(handler); }, 3000);
DEMO
fonte
i
elisteners
"privado".Você não pode, você precisa de uma referência para a função:
function doSomethingWith(param) { var fn = function(){ document.write(param); }; document.body.addEventListener('scroll', fn, false); setTimeout(function(){ document.body.removeEventListener('scroll', fn, false); }, 3000); } doSomethingWith('Test. ');
fonte
var fn = function(event){ document.write(param); };
Você também pode fazer isso assim:
const ownAddEventListener = (scope, type, handler, capture) => { scope.addEventListener(type, handler, capture); return () => { scope.removeEventListener(type, handler, capture); } }
Em seguida, você pode remover o ouvinte de evento desta forma:
// Add event listener const disposer = ownAddEventListener(document.body, 'scroll', () => { // do something }, false); // Remove event listener disposer();
fonte
const disposerFn = () => { scope.removeEventListener(type, handler, capture); }
disposerFn.type = type;
return disposerFn;
se você não tem que suportar o IE, você pode usar a opção uma vez
[Element].addEventListener('click', () => {...}, { capture: false, once: true });
fonte