Как удалитьEventListener, то есть addEventListener с анонимной функцией?

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. ');
Japboy
источник
Возможный дубликат JavaScript: удалить прослушиватель событий
Heretic Monkey

Ответы:

111

Вы не можете. Вы должны использовать именованную функцию или как-то сохранить ссылку.

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
1
@Japboy: Пожалуйста :) Я только что заметил небольшую ошибку и исправил ее.
Феликс Клинг,
Зачем вам оборачивать addListener и removeListener?
бесполезен
@useless: Вы имеете в виду самозапускающуюся функцию? Чтобы сохранить iи listeners«в частном порядке».
Феликс Клинг
2
@Bergi: Готово. Сообщите мне, если я что-то пропустил.
Felix Kling
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
@sliervar fn = function(event){ document.write(param); };
cychoi
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 07
Вы можете просто добавить к функции некоторые свойства, такие как тип, область видимости и т. Д.const disposerFn = () => { scope.removeEventListener(type, handler, capture); } disposerFn.type = type; return disposerFn;
Саймон Йенч,
1

если вам не нужно поддерживать IE, вы можете использовать опцию Once

[Element].addEventListener('click', () => {...}, {
  capture: false,
  once: true
});
маной
источник