爲什麼removeeventlistener在此對象上下文中不起作用？

Question

我正在製作一款遊戲，我想抽象出我的UI，並根據各種遊戲狀態綁定解綁事件。但我不明白爲什麼這個事件沒有被刪除。看起來範圍在處理程序中是正確的。

fiddle

相關（精簡）JS：

var controls = { 
    game : { 
     el : null, 
     cb : null, 

     bind : function(el, cb) { 
      this.el = el; 
      this.cb = cb; 
      this.el.addEventListener('click', this.handler.bind(this), true); 
     }, 

     unbind : function() { 
      console.log('unbind'); 
      this.el.removeEventListener('click', this.handler, true); 
     }, 

     handler : function() { 
      this.cb(); 
      this.unbind(); 
     } 
    } 
}; 

var manager = { 
    init : function() { 
     var c = document.getElementById('c'); 
     controls.game.bind(c, this.action.bind(this)); 
    }, 

    action : function() { 
     console.log('c clicked'); 
    } 
}; 
manager.init(); 

可是如果我刪除事件這樣它的工作原理：

(...) 

bind : function(el, cb) { 
    this.el = el; 
    this.cb = cb; 
    var self = this; 
    this.el.addEventListener('click', function() { 
     self.cb(); 
     self.el.removeEventListener('click', arguments.callee, true); 
    }, true); 
} 

(...) 

感謝

Answer 1

.bind返回新功能。 this.handler.bind(this) !== this.handler！您必須以某種方式存儲對新功能的引用。

例如，存儲在一個變量的引用，並使用封閉：

var handler = this.handler.bind(this); 
this.el.addEventListener('click', handler, true); 

this.unbind = function() { 
    this.el.removeEventListener('click', handler, true); 
} 

作爲替代arguments.callee，你還可以給該函數的名稱：

this.el.addEventListener('click', function handler() { 
    self.cb(); 
    self.el.removeEventListener('click', handler, true); 
}, true); 

Answer 2

，而不是與打綁定這也需要更多的內存我會推薦使用the following：

var song = { 
    handleEvent: function (event) { 
     switch (event.type) { 
     case: "click": 
      console.log(this.name); 
      break; 
     } 
    }, 
    name: "Yesterday" 
}; 

songNode.addEventListener("click", song); 
songNode.click(); // prints "Yesterday" into console 

您可以使用對象obj，該對象具有handleEvent屬性作爲任何DOM對象的處理程序來捕獲其事件，並將事件處理程序的上下文設置爲該對象obj而不使用Function.prototype.bind。

這樣，你也可以移除處理程序，所以

songNode.removeEventListener("click", song);