Как удалить событие элемента, объявленного анонимной функцией?

Question

пример кода:

element.addEventListener('click',function() { 
    this.style.backgroundColor = '#cc0000' 
    //after element was clicked once what to do here to remove this event ? 
},false) 

А где это сделать, можно непосредственно в функции, где я поставил свой комментарий?

Answer 1

Если вы добавили событие с addEventListener(), вы должны иметь ссылку на эту функцию, чтобы иметь возможность впоследствии удалить ее.

С анонимной функции, что это возможно только с arguments.callee, и только тогда, когда вы находитесь внутри самой функции:

element.addEventListener('click', function() { 
    this.style.backgroundColor = '#cc0000'; 
    this.removeEventListener('click', arguments.callee); 
}, false); 

, но обратите внимание, что это не является законным в ES5 «строгого режима».

Поэтому было бы просто лучше дать ваш обратный вызов имя, а затем использовать его в вызове removeEventLister():

element.addEventListener('click', function cb() { 
    this.style.backgroundColor = '#cc0000'; 
    this.removeEventListener('click', cb); 
}, false); 

Демо на http://jsfiddle.net/alnitak/RsaVE/

Answer 2

Не по-настоящему анонимным больше, но здесь лучше Я могу придумать (используя замыкание):

(function(){ 
    var handler = function(){ 
    this.style.backgroundColor = '#cc0000' 
    element.removeEventListener('click', handler, false); 
    }; 
    element.addEventListener('click', handler, false); 
})(); 

Edit: +1 для пересмотренного ответа Альнитак - он немного более кратким, чем это один.