如何刪除由匿名函數聲明的元素的事件？

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

編輯：Alnitak 修訂后的答案 +1 - 它比這個更簡潔。