在对象内管理addEventListener（）和removeEventListener（）

Question

我在javascript中有一个伪类，该类具有一种向两个按钮添加和删除侦听器的方法。 这是代码：

function FirstObj(secondObj){
  this.loginButton = document.getElementById("login");
  this.logoutButton = document.getElementById("logout");
  this.secondObj = secondObj
}

FirstObj.prototype = {
  manageListeners : function(state){   //state is a boolean
    var self = this;
    if (state) {
      display += "none";
      this.loginButton.addEventListener("click", function(){
        self.seconfObj.makeSomething();
      }, false);
      this.logoutButton.removeEventListener("click", /*???*/ , false);
    }
    else {
      this.logoutButton.addEventListener("click", function(){
        self.logout();
      }, false);
      this.loginButton.removeEventListener("click", /*???*/ , false);
    }
  }, 
  logout : function(){
    //logout...
  }
}

问题是：如何修改此代码以正确管理事件侦听器？

Answer 1

我认为您无法删除匿名函数的事件监听器。 改用命名函数：

var myEventListener = function() {
    console.log("Hello World!");
};

myElement.addEventListener("click", myEventListener, false);
myElement.removeEventListener("click", myEventListener, false);

这是您的类的稍作修改的版本，应该可以正确管理事件侦听器：

function FirstObj(secondObj){

    var self = this;

    this.loginButton = document.getElementById("login");
    this.logoutButton = document.getElementById("logout");
    this.secondObj = secondObj;

    this.loginButtonClicked = function(){
        self.secondObj.makeSomething();
    };

    this.logoutButtonClicked = function(){
        self.logout();
    };

}

FirstObj.prototype = {

    manageListeners : function(state){

        if (state) {
            display += "none";
            this.loginButton.addEventListener("click", this.loginButtonClicked, false);
            this.logoutButton.removeEventListener("click", this.logoutButtonClicked, false);
        }
        else {
            this.logoutButton.addEventListener("click", this.logoutButtonClicked, false);
            this.loginButton.removeEventListener("click", this.loginButtonClicked, false);
        }

    },

    logout : function(){
        // Log out...
    }

};

但是，如果重写类以利用闭包，则可以将其简化为：

function FirstObj(secondObj){

    var self = this;

    var loginButton = document.getElementById("login");
    var logoutButton = document.getElementById("logout");

    var loginButtonClicked = function(){
        secondObj.makeSomething();
    };

    var logoutButtonClicked = function(){
        self.logout();
    };

    this.manageListeners = function(state){

        if (state) {
            display += "none";
            loginButton.addEventListener("click", loginButtonClicked, false);
            logoutButton.removeEventListener("click", logoutButtonClicked, false);
        }
        else {
            logoutButton.addEventListener("click", logoutButtonClicked, false);
            loginButton.removeEventListener("click", loginButtonClicked, false);
        }

    };

    this.logout = function(){
        // Log out...
    };

}

在这里，我假设无需从类外部访问loginButton ， logoutButton和secondObj 。 如果是这样，只需将它们设置为FirstObj属性，并更新引用它们的代码（在范围内使用this ，而在范围外使用self ）。