如何使用匿名函数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();