Cómo eliminar EventListener que es addEventListener con función anónima?

Question

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. '); 

Answer 1

No puede. Tienes que usar una función nombrada o almacenar la referencia de alguna manera.

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

Lo mejor sería hacer esto de una manera estructurada, de manera que pueda identificar diferentes manipuladores y eliminarlos. En el ejemplo anterior, obviamente solo puedes eliminar el último controlador.

Actualización:

Usted puede crear su propio controlador de controlador (:)):

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

Entonces se puede usar con:

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

Answer 2

No puedes, necesitas una referencia a la función:

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. '); 

Answer 3

También podría hacerlo así:

const ownAddEventListener = (scope, type, handler, capture) => { 
    scope.addEventListener(type, handler, capture); 
    return() => { 
    scope.removeEventListener(type, handler, capture);  
    } 
} 

Entonces se puede quitar el detector de eventos como éste:

// Add event listener 
const disposer = ownAddEventListener(document.body, 'scroll',() => { 
    // do something 
}, false); 

// Remove event listener 
disposer();