如何使用匿名函数删除作为addEventListener的EventListener?


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

Answers:


110

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

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

演示


您能否解释一下结构化方式是什么?我的英语能力不足以理解...谢谢。
Japboy 2011年

1
@Japboy:不客气:)我刚刚注意到一个小错误,并将其修复。
Felix Kling

为什么要包装addListener和removeListener?
没用

@useless:您是指自动调用功能吗?保持ilisteners“私有”。
Felix Kling

2
@Bergi:完成。让我知道我是否错过了什么。
Felix Kling 2014年

11

不能,您需要对函数的引用:

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

您如何传递事件对象?
slier 2014年

@sliervar fn = function(event){ document.write(param); };
cychoi 2014年

5

您也可以这样做:

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

是否可以像这样确定哪些事件已绑定到对象?
frumbert

你可能只是一些属性添加到功能,喜欢的类型,范围等const disposerFn = () => { scope.removeEventListener(type, handler, capture); } disposerFn.type = type; return disposerFn;
西蒙·耶特斯

1

如果您不必支持IE,则可以使用一次选项

[Element].addEventListener('click', () => {...}, {
  capture: false,
  once: true
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.