Почему removeeventlistener не работает в этом объектном контексте?

Question

Я работаю над игрой, и я хотел бы абстрагировать свой ui и связывать события развязывания на основе различных состояний игры. Но я не могу понять, почему это событие не удаляется. Кажется, что область действия правильна в обработчике.

fiddle

соответствующих (усеченные) ЯШ:

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