javascript - removeEventListener - callback within function definition itself? - Stack Overflow

admin管理员组

文章数量:1344940

I have the following code where I add an event listener to the document and then remove it.

document.addEventListener("keypress", gameStart);

function gameStart() {
    document.querySelector("h1").innerHTML = "Level 1";
    document.querySelector("h2").style.visibility = "hidden";
    document.removeEventListener("keypress", gameStart);
}

I cannot wrap my head around how I can have a callback to gameStart in the removeEventListener method inside the definition of gameStart() itself. This seems circular to me, but I sense I am misunderstanding something fundamental here. What am I missing?

I have the following code where I add an event listener to the document and then remove it.

document.addEventListener("keypress", gameStart);

function gameStart() {
    document.querySelector("h1").innerHTML = "Level 1";
    document.querySelector("h2").style.visibility = "hidden";
    document.removeEventListener("keypress", gameStart);
}

I cannot wrap my head around how I can have a callback to gameStart in the removeEventListener method inside the definition of gameStart() itself. This seems circular to me, but I sense I am misunderstanding something fundamental here. What am I missing?

• javascript
• function
• dom-events

Share Improve this question Follow asked Apr 20, 2020 at 10:42 codingbryancodingbryan 4011 silver badge1010 bronze badges 2

• The function doesn't know it is used as a callback. gameStart is a reference to the function, and with the reference you can pass functions around in JS. A reference to the function itself is passed automatically to the named functions, and can be got from the outer scope if an anonymous function is assigned to a variable. This reference is actually a value, and in JS, circular references are not a problem, you can fluently do ex. const arr = []; arr[0] = arr;. See stackoverflow./questions/1493453/… – Teemu Commented Apr 23, 2020 at 8:06
• also note that, if you you´re unfortable with that, you can also pass a third argument options to addEventListener where you can specify that the listener will only be called once. document.addEventListener("keypress", gameStart, {once: true});. Documentation: developer.mozilla/en-US/docs/Web/API/EventTarget/… – ItsFlo Commented Apr 29, 2020 at 6:41

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6 +50

In the removeEventListener documentation we can see:

target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);

...

listener
   The EventListener function of the event handler to remove from the event target.

the EventListener function (in your case gameStart) is not called when calling removeEventListener, therefore there is not any circular calling or recursion, it is passed to removeEventListener so this function can be unregistered from that event.

Variables used inside a function are not evaluated until the function is called.

gameStart can, therefore, reference itself because it is created before it can be called.

You can always pass the reference of the function that you're defining because

A function doesn't have to have everything available at the time of definition, rather that's a requirement at the time of calling.

It's also fundamental to recursion. e.g.

function getFactorial(num) {
    if (num <= 2) {
        return num;
    }
    return num * getFactorial(num - 1);
}

Maybe, the following will help you understand more:

function getType() {
    return typeof getType;
}

Above function will always return "function".

How about another one:

function getTypeOfX() {
    return typeof myObj.x;
}

You'll be able to define this function but as soon as you call it using getTypeOfX(), you'll get an error because myObj is not defined in the outer / global scope of the function definition.

If you're trying that out in console. You can do

var myObj = {
    x: ""
}

even after the function definition, and call getTypeOfX() again to see that it now prints "string".

The conclusion here is what @Quentin mentioned:

Variables used inside a function are not evaluated until the function is called.

Everybody answers are pretty plex. A little simpler:

1- You are not calling the gameStart function back on document.removeEventListener("keypress", gameStart); You are actually calling the removeEventListener() function - Now read that again because I know this can be confusing.

2- You are telling the removeEventListener() function to remove your on key press listener from your gameStart() function. gameStart never called itself at the end on that line.

3- Real life example(out of puting) :

Someone calls you to your Phone# xxx-xxx-xxxx then you pick up and that person tells you to do something (you are gameStart()) after you are done you want to hung up because you have nothing else to do or discuss with the other person on the phone, so you tell the other person to hung up for you because other wise they will stay listening forever on the call(the other person was the event listener). You did not hung up, you did not even participate on the action to hung up, you just told them what they needed to do.

I hope that helps!

本文标签： javascriptremoveEventListenercallback within function definition itselfStack Overflow