如何使用匿名函数removeEventListener作为addEventListener?

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

你不能。 你必须使用一个命名函数或以某种方式存储引用。

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

最好的做法是以结构化的方式做到这一点,以便您可以识别不同的处理程序并将其删除。 在上面的例子中,你显然只能删除最后一个处理程序。

更新:

你可以创build你自己的处理程序处理程序(:)):

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

那么你可以使用它:

 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

你不能,你需要一个参考的function:

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

你也可以这样做:

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

然后你可以像这样删除事件监听器:

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