激活事件侦听器后删除事件侦听器

Question

I get the event listeners activated just fine, but getting the event listener to remove itself after it has been activated is thus far eluding me. From trying to research this on my own so far, my understanding is that the function attached to the event listener somehow needs to be given a name which removing the event listener requires to be able to remove. I tried that, but couldn't get it to work as it then resulted in problems with no longer recognizing 'e' anymore. Here is my code:

that.enter = function(imageID, textID) {
    // Listen for the ENTER key and mouse click.
    console.log('Add event listeners...');
    console.log(imageID + ' ' + textID);
    document.addEventListener('keydown', function(e) { 
        if (e.which === 13) {
            document.getElementById(imageID).click();
            console.log('keydown activated');
            console.log('removing keydown... ');
            document.removeEventListener('keydown', function(e){});
            console.log('keydown removed');
        }
    });
    document.addEventListener('click', function(e) { 
        if (e.target.id != imageID && e.target.id != textID) {
            document.getElementById(imageID).click();
            console.log('click activated');
            console.log('removing click... ');
            document.removeEventListener('click', function(e){});
            console.log('click removed');
        }
    });
    console.log('DONE');
};

Answer 1

Put the function in a variable, that way you can reference it later when you use removeEventListener . Eg

document.addEventListener('keydown', theListener);
function theListener(e) { 
    if (e.which === 13) {
        document.getElementById(imageID).click();
        console.log('keydown activated');
        console.log('removing keydown... ');
        document.removeEventListener('keydown', theListener);
        console.log('keydown removed');
    }
}

The second argument to removeEventListener must be the exact same function that was used in addEventListener - it won't recognize a new function you just declared as being in the listener list.