在对象中管理addEventListener（）和removeEventListener（） [英] manage addEventListener() and removeEventListener() inside an object

问题描述

我在javascript中有一个伪类，它有一个方法来添加和删除监听器到两个按钮。
这是代码：

  function FirstObj（secondObj）{
 this.loginButton = document.getElementById （登录）; 
 this.logoutButton = document.getElementById（logout）; 
 this.secondObj = secondObj 
} 
 
 FirstObj.prototype = {
 manageListeners：function（state）{// state is a boolean 
 var self =这个
 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 ... 
} 
} 
  

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

解决方案

我不认为你可以删除匿名函数的事件侦听器。使用命名函数：

  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（）{
 //注销... 
} 
 
}; 
  

但是，如果您重写类以利用闭包，则可以简化为： / p>

  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（）{
 //注销... 
}; 
 
} 
  

这里我假设 loginButton ， logoutButton 和 secondObj 不需要从课外访问。如果他们这样做，只需使他们的属性为 FirstObj 并更新引用它们的代码（使用这个在范围和 self 超出范围）。

I have a pseudo-class in javascript that has a method to add and remove listeners to two buttons. This is the code:

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...
  }
}

the question is: how i could modify this code to manage event listener correctly?

解决方案

I don't think you can remove an event listener for an anonymous function. Use named functions instead:

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

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

Here is a slightly modified version of your class that should manage the event listeners properly:

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...
    }

};

If you rewrite your class to take advantage of closures, though, you can simplify it to this:

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...
    };

}

Here I've assumed that loginButton, logoutButton, and secondObj don't need to be accessed from outside the class. If they do, just make them properties of FirstObj and update the code that references them (using this in scope and self out of scope).

这篇关于在对象中管理addEventListener（）和removeEventListener（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！