如何删除 Aurelia 中的事件监听器？答案

【问题标题】：How to remove event listeners in Aurelia?如何删除 Aurelia 中的事件监听器？
【发布时间】：2015-08-31 18:37:11
【问题描述】：

如何在 Aurelia 中移除事件监听器？

这似乎没有做任何事情：

detached(){
  window.removeEventListener('scroll', this.windowScroll);
}

当我更改路线时，事件仍在触发。

我将它附加在我的视图模型文件的constructor() 中：

window.addEventListener('scroll', this.windowScroll.bind(this));

我也试过deactivate()，当我改变路线时，两者都没有触发。

【问题讨论】：

bind 返回一个新函数...尝试将附加代码更改为 this.windowScroll = this.windowScroll.bind(this); window.addEventListener('scroll', this.windowScroll); 然后 detached 事件应该删除订阅
这应该是答案。

标签： aurelia

【解决方案1】：

这里至少有一个，但也许有两个问题。

设置事件监听器

如果您不能使用 Aurelia 绑定进行事件委托（滚动可能是也可能不是，我没有尝试过），那么您应该使用附加的生命周期回调来设置您的事件处理程序，不是构造函数。原因是，除非您指定视图模型是瞬态的，否则构造函数将被调用一次。相反，您真的希望 Aurelia 在每次附加时都打开您的事件处理程序。

attached = () => {
    window.addEventListener('scroll', this.onScroll);
}

如何编写生命周期回调

一般来说，您应该使用箭头符号来编写您的生命周期回调。这是因为，IIRC，您的 this 可能会在激活生命周期内被重新分配。 TypeScript/ES6 中的箭头符号将保留您的 this 词法，即，它是您所期望的。

detached = () => { 
    window.removeEventListener('scroll', this.onScroll);
}

【讨论】：

【解决方案2】：

值得注意的是，如果要在分离时再次解除绑定，则需要在构造函数中定义可绑定函数：

export MyClass {

constructor() {

    this.handleBodyClick = e => {

        console.log(e.target);
    };
}

attached() {

    document.addEventListener('click', this.handleBodyClick);
}

detached() {

    document.removeEventListener('click', this.handleBodyClick);
}

直接取自这篇出色的帖子：http://ilikekillnerds.com/2016/02/using-event-listeners-in-aurelia/

【讨论】：