为什么不删除事件侦听器？

Question

我的代码是：

    var input = document.getElementById('showInput0');
var inputStr = 'showInput0';

numberOfInputs = 0;
function anotherInput() {
    var div = document.createElement('div');
    div.innerText = '- ';

    id = 'showInput' + numberOfInputs;
    document.body.appendChild(div).setAttribute('id', id);

    /*lastNumOfId = str.slice(-1);
    lastNumOfIdMULT = lastNumOfId + 1;
    console.log('lastNumOfId:', lastNumOfId);
    var inputStr = 'showInput' + lastNumOfIdMULT;
    var input = document.getElementById(inputStr);*/
    numberOfInputs += 1;

    listen(id);
}

var help = ['help: Returns this.', 'clear: Clears the text'];
var numberOfOutputContainers = 0;
var numberOfOutputs = 0;

function execCommand(command) {
    inputtedCommandStr = command.toString();
    command = inputtedCommandStr.replace(/,/g, '');
    console.log('COMMAND GOT:', command);
    if (command == 'help') {
        console.log('Command', command, 'registered');

        var container = document.createElement('div');
        //.setAttribute('id', 'outputParaX');
        container.innerText = 'container:';

        idOfOutput = 'showOutput' + numberOfOutputContainers;
        document.body.appendChild(container).setAttribute('id', idOfOutput);
        numberOfOutputContainers += 1;

        for (const item of help) {
            var div = document.createElement('div');
            div.innerText = item;
            id = 'Output' + help.indexOf(item);
            numberOfOutputs += 1;
            document
                .getElementById(idOfOutput)
                .appendChild(div)
                .setAttribute('id', id);
        }

        anotherInput();
    } else if (command == 'clear') {
    } else {
        console.log('Command', command, 'is unknown');
    }
}

function listen(inputStr) {
    input = document.getElementById(inputStr);
    var inputtedCommandStr = '';
    var inputtedCommand = [];
    document.addEventListener('keydown', function(e) {
        //console.log(e.which);
        //console.log(e.key);

        if (e.key == 'Space') {
            inputtedCommand.push(' ');
        } else if (e.key == 'Backspace') {
            inputtedCommand.pop();
        } else if (e.key == 'Enter') {
            //EXECUTE COMMAND
            if (document.removeEventListener('keydown', e)) {
                document.removeEventListener('keydown', e);
            } else {
                console.log('NO EVENT LISTENER FOUND');
                document.removeEventListener('keydown', e);
            }
            document.removeEventListener('keydown', e);
            execCommand(
                inputtedCommand,
                numberOfOutputContainers,
                numberOfOutputs
            );
            //inputtedCommand = [];
        } else if (e.key == 'Alt') {
            console.log(
                'Button represents an action in the character --> not in the command string'
            );
        } else if (e.key == 'AltGraph') {
            console.log(
                'Button represents an action in the character --> not in the command string'
            );
        } else if (e.key == 'Shift') {
            console.log(
                'Button represents an action in the character --> not in the command string'
            );
        } else if (e.key == 'CapsLock') {
            console.log(
                'Button represents an action in the character --> not in the command string'
            );
        } else if (e.key == 'Control') {
            console.log(
                'Button represents an action in the character --> not in the command string'
            );
        } else if (e.key[0] == 'F') {
            console.log(
                'Button represents an action in the character --> not in the command string'
            );
        } else {
            inputtedCommand.push(e.key);
        }

        //console.log(inputtedCommand);
        /*
    for (const item of inputtedCommand) {
        console.log(item)

    }

    for (let index = 0; index < inputtedCommand.length; index++) {
        inputtedCommandStr[index] = inputtedCommand[index]
        console.log(inputtedCommand, inputtedCommandStr)
    }*/

        inputtedCommandStr = inputtedCommand.toString();
        input.innerHTML = '- ' + inputtedCommandStr.replace(/,/g, '');
        console.log(input);
    });
}

anotherInput();

并且，在我输入help hit enter然后重复几次之后，我得到了这个作为输出：

- help
container:
help: Returns this.
clear: Clears the text
- helphelp
container:
help: Returns this.
clear: Clears the text
- helphelp
container:
help: Returns this.
clear: Clears the text
- helphelp
container:
help: Returns this.
clear: Clears the text
- helphelp
container:
help: Returns this.
clear: Clears the text
- helphelp
container:
help: Returns this.
clear: Clears the text

Answer 1

要删除事件侦听器，最好为函数命名。 JS 会根据这个页面尝试匹配函数/监听器。

您拥有的线路：

document.removeEventListener('keydown', e);

不会删除任何内容，因为 'e' 不是函数。

首先，你需要这样的东西：

let handler = function(e){/*stuff*/};
document.addEventListener('keydown', handler);

然后你可以删除它

document.removeEventListener('keydown', handler);