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）。

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

1 个答案: