如何在Ember中删除事件监听器

Question

我想在Ember中的keydown事件中的组件中设置事件侦听器。已正确添加了事件侦听器，但是由于removeEventListener传递了另一个函数，因此我似乎无法将其删除。任何有关如何正确设置此设置的帮助将不胜感激。

onEscPress(e) {
  if (e.which === 27) {
    alert('test');
    this.send('dismissModal');
  }
},

willInsertElement() {
  window.addEventListener('keydown', this.onEscPress(e), false);
},

willDestroyElement() {
  // Uses a different function, so doesn't properly remove the listener
  window.removeEventListener('keydown', this.onEscPress(e), false);
},

Answer 1

了解在您的代码中将onEscPress 的结果传递给事件处理程序非常重要。这不是您想要的。

另外，如果要使用this，则不能直接将函数传递给事件处理程序，因为它将在不同的动态上下文中执行。因此，正确的方法是

1. 在init挂钩中创建函数的绑定版本，
2. 将事件侦听器添加到didInsertElement挂钩中的绑定函数，然后
3. 在willDestroyElement挂钩中删除此绑定函数。

所以这是一些代码：

onEscPress(e) {
    if (e.which === 27) {
        alert('test');
        this.send('dismissModal');
    }
},
init() {
    this._super(...arguments);
    this.set('boundOnEscPress', this.get('onEscPress').bind(this));
},
willInsertElement() {
    this._super(...arguments);
    window.addEventListener('keydown', this.get('boundOnEscPress'), false);
},
willDestroyElement() {
    this._super(...arguments);
    window.removeEventListener('keydown', this.get('boundOnEscPress'), false);
},

也永远不要忘记打电话this._super(...arguments);！它真的很重要！