如何使用匿名函數removeEventListener作爲addEventListener？

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

你不能。您必須使用命名函數或以某種方式存儲參考。

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

最好的做法是以結構化的方式完成這項工作，以便您可以識別不同的處理程序並將其刪除。在上面的例子中，你顯然只能刪除最後一個處理程序。

更新：

你可以創建自己的處理程序處理程序（:)）：

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

Answer 2

你不能，你需要一個參考功能：

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

你也可以做到這一點像：

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