删除使用绑定添加的事件侦听器

javascript events bind listener

2022-08-30 01:18:27

在 JavaScript 中，使用 bind（）删除作为事件侦听器添加的函数的最佳方法是什么？

例

(function(){

    // constructor
    MyClass = function() {
        this.myButton = document.getElementById("myButtonID");
        this.myButton.addEventListener("click", this.clickListener.bind(this));
    };

    MyClass.prototype.clickListener = function(event) {
        console.log(this); // must be MyClass
    };

    // public method
    MyClass.prototype.disableButton = function() {
        this.myButton.removeEventListener("click", ___________);
    };

})();

我能想到的唯一方法是跟踪每个使用bind添加的听众。

上面使用此方法的示例：

(function(){

    // constructor
    MyClass = function() {
        this.myButton = document.getElementById("myButtonID");
        this.clickListenerBind = this.clickListener.bind(this);
        this.myButton.addEventListener("click", this.clickListenerBind);
    };

    MyClass.prototype.clickListener = function(event) {
        console.log(this); // must be MyClass
    };

    // public method
    MyClass.prototype.disableButton = function() {
        this.myButton.removeEventListener("click", this.clickListenerBind);
    };

})();

有没有更好的方法来做到这一点？

答案 1

尽管@machineghost说的是真的，事件以相同的方式添加和删除，但等式中缺少的部分是这样的：

调用后将创建新的函数引用。.bind()

请参阅 bind（）是否更改函数引用？|如何永久设置？

因此，要添加或删除它，请将引用分配给变量：

var x = this.myListener.bind(this);
Toolbox.addListener(window, 'scroll', x);
Toolbox.removeListener(window, 'scroll', x);

这对我来说是预期的。

答案 2

对于那些在将 React 组件的侦听器注册/删除到 Flux 存储/从 Flux 存储中删除时遇到此问题的人，请将以下行添加到组件的构造函数中：

class App extends React.Component {
  constructor(props){
    super(props);
    // it's a trick! needed in order to overcome the remove event listener
    this.onChange = this.onChange.bind(this);  
  }
  // then as regular...
  componentDidMount (){
    AppStore.addChangeListener(this.onChange);
  }
  
  componentWillUnmount (){
    AppStore.removeChangeListener(this.onChange);
  }

  onChange () {
    let state = AppStore.getState();
    this.setState(state);
  }
  
  render() {
    // ...
  }
  
}