2017-01-05 22 views
1

Ich habe eine Funktion, die Benutzernamen überprüft. Der Benutzername wird zu localstorage aufgerufen, wenn die Eingabetaste gedrückt wird, und danach möchte ich den eventListener stoppen. Aus irgendeinem Grund funktioniert es nicht, und ich kann nicht herausfinden warum!Entfernen von EventListener funktioniert nicht - Javascript

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)); 

Irgendwelche Ideen?

Antwort

2

Das zweite Argument zu muss die Funktion sein, die Sie entfernen möchten.

Sie übergeben es eine neue Funktion, die das gleiche tut wie die Funktion, die Sie entfernen möchten.

Dies sollte die Arbeit machen:

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

auch fest op Code, den Sie da in der ursprünglichen 'event' wäre 'undefined' – pwolaq

1

Die Syntax ()=>{} erstellt eine neue Funktion. Sie übergeben also zwei verschiedene anonyme Funktionen, die mit der Doppelpfeilsyntax erstellt wurden, an addEventListener und , während sie identisch sein sollten. Sie können so beheben:

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

Aber da die äußere Funktion die gleiche wie innere Funktion der Fall ist, können Sie es überspringen:

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

Ersetzen von' var' durch 'const' wäre eine gute Idee in Anbetracht der ES6 Syntax – pwolaq

+0

@pwolaq, yeah, thanks, updated –

Verwandte Themen