删除EventListener无法正常工作 - Javascript

Question

我有一个函数可以检查用户名。当按Enter键时，用户名被调用到localstorage，然后我想让eventListener停止。由于某种原因，它不起作用，我不明白为什么！

var checkUserName = function(event) { 

    let key = event.which || event.keyCode; 

    if (key === 13) { 
     if (this.usernameInput.value.length <= 0) { 
      throw new Error("Username to short!") 
     } else if (/\s/g.test(this.usernameInput.value)) { 
      throw new Error("No white spaces, please!") 
     } else if (this.usernameInput.value.length > 30) { 
      throw new Error("Username to long!") 
     } else { 
      localStorage.setItem("username", JSON.stringify(this.usernameInput.value)); 
      this.usernameInput.value = ""; 
     } 
    } 
}.bind(this); 

window.addEventListener("keypress", initiate => checkUserName(event)); 
window.removeEventListener("keypress", initiate => checkUserName(event)); 

任何想法？

Answer 1

removeEventListener的第二个参数需要是您要删除的功能。

您正在向它传递一个新函数，它与要删除的函数具有相同的功能。

这应该做的工作：

window.addEventListener("keypress", checkUserName); 
window.removeEventListener("keypress", checkUserName); 

Answer 2

语法()=>{}创建一个新的功能。因此，您将通过双箭头语法创建的两个不同的匿名函数传递给addEventListener和removeEventListener，而它们应该是相同的。您可以修复这样的：

const fn = event => checkUserName(event); 
window.addEventListener("keypress", fn); 
window.removeEventListener("keypress", fn); 

但由于外部函数不一样的内部函数，你可以跳过它：因为在原来的`event`

window.addEventListener("keypress", checkUserName); 
window.removeEventListener("keypress", checkUserName);