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，也不能直接将函数传递给事件处理程序，因为它将在不同的动态上下文中执行。所以正确的方法是

在init hook，
在didInsertElement挂钩和
删除willDestroyElement hook中的此绑定函数。

所以这里有一些代码：

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);！它真的很重要！

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

1 个答案: