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の2番目の引数は、削除する関数をにする必要があります。

削除する機能と同じことを行うの新しい機能を渡しています。

これは、ジョブを実行する必要があります。

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

Answer 2

構文()=>{}は、新しい関数を作成します。したがって、二重矢印構文で作成された2つの異なる匿名関数をaddEventListenerとremoveEventListenerに渡していますが、同じである必要があります。あなたはそのように修正することができます：

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

しかし、外側の関数は内側の関数と同じことをするので、あなたはそれをスキップすることができます

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