[英]manage addEventListener() and removeEventListener() inside an object
I have a pseudo-class in javascript that has a method to add and remove listeners to two buttons. 我在javascript中有一个伪类,该类具有一种向两个按钮添加和删除侦听器的方法。 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. 在这里,我假设无需从类外部访问
loginButton
, logoutButton
和secondObj
。 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). 如果是这样,只需将它们设置为
FirstObj
属性,并更新引用它们的代码(在范围内使用this
,而在范围外使用self
)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.