![](/img/trans.png)
[英]Why call removeEventListener inside addEventListener callback?
[英]manage addEventListener() and removeEventListener() inside an object
我在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...
}
}
問題是:如何修改此代碼以正確管理事件偵聽器?
我認為您無法刪除匿名函數的事件監聽器。 改用命名函數:
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
)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.