gérer addEventListener() et removeEventListener() à l'intérieur d'un objet

Question

J'ai une pseudo-classe en javascript qui a une méthode pour ajouter et supprimer des écouteurs à deux boutons. Voici le 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... 
    } 
} 

la question est: comment je pourrais modifier ce code pour gérer écouteur d'événement correctement?

Answer 1

Je ne pense pas que pouvez supprimer un écouteur d'événement pour une fonction anonyme. Utilisez les fonctions nommées à la place:

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

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

Voici une version légèrement modifiée de votre classe qui doit gérer les auditeurs d'événement correctement:

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

}; 

Si vous réécrivez votre classe pour tirer parti des fermetures, cependant, vous peut simplifier à ceci:

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

} 

ici, je suis supposé que loginButton, logoutButton et secondObj ne doivent pas nécessairement être accès sed de l'extérieur de la classe. S'ils le font, il suffit de les rendre propriétés de FirstObj et de mettre à jour le code qui les référence (en utilisant this dans la portée et self hors champ).