为什么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);