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

但是由於外部功能與內部功能相同，因此可以跳過它：

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