управлять 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 вне области видимости).