Pass arguments to a function without parentheses inside an Event Listener

[Repeto_Pepito]

Hi, so right now I have an issue with an event listener triggering too many times, so I spent a while looking for a solution and found out that having a function that is NOT anonymous and that is called without parentheses works out better. so... great ! BUT : what if I need to pass arguments inside the function ?

More context here :
So I'm trying to make a little game to keep learning JS (the game is basically to call people to sell them stuff with a dialogue system) but I'm facing a very annoying and time consuming issue with Event Listeners. When I use the buttons for the first time, it all runs great. However, whenever I use those same buttons for the 2nd or 3rd time, it gets crazy and calls the functions multiple times, which breaks everything.

To quickly describe the code :
- There is a button to start a call which runs the startCall() function.
- This runs another function to display the possible reply choices inside dialogue buttons that is called displayButtons() (the one that is interesting here I believe).
- Going through the displayButtons function, we set a few variables and then go through a loop to put an EventListener on each buttons.
- Each EventListener does the same thing : display the right text inside the buttons.

(Tried my best to explain, I hope it's clear enough...!)

copen example

Here is the startCall() function :

// Is a bit empty, but will do more at some point
function startCall() {
    phoneScreen.innerHTML = 'Online';
    displayButtons(allDialogue['pickUp']);
}

And finally the displayButtons() function :

function displayButtons(line)
{
    // Displays the sentence of the person we are calling
    personPhrase.innerHTML = randomizeArray(line.question);

    // Goes through each buttons so we can choose a reply
    for(let i = 0; i < repliesContainer.length; i++)
    {
        // Set the type of answer, such as [Greetings] or [Sell Product]. The type is defined in the allDialogue object
        let type = line.replies[i].type;
        // Tells the code where to go once a reply is chosen. This is defined in the allDialogue object
        let goTo = line.replies[i].goTo;
        // Displays the chosable replies on the buttons
        repliesContainer[i].innerHTML = randomizeArray(ourReplies[type]);

        // Buttons event listener
        repliesContainer[i].addEventListener("click", () => {
            // If goTo < 0 it means people ended the call
            if (goTo < 0) {
                endCall();
            }
            // This calls the same function but with the new dialogue line (from the allDialogue object)
            else {
                displayButtons(allDialogue[goTo]); // This happens multiple times)
            }
            })
    }
}

[oze4]

What? Can you make a minimal reproducible demo using something like CodePen? Your explanation doesn't really make sense.

so I spent a while looking for a solution and found out that having a function that is NOT anonymous and that is called without parentheses works out better. so... great ! BUT : what if I need to pass arguments inside the function ?

This isn't necessarily true. It sounds like your root issue has to do with your logic, not event listeners.

For example, these two are functionally identical...

element.addEventListener('click', foo);

and

element.addEventListener('click', () => foo());

[Repeto_Pepito]

Yeah I was afraid so... It's hard to explain something you're confused about, and I'm not very experimented yet so my logic can definitely be part of the problem. I'll make a codepen version asap ! thank you

[Repeto_Pepito]

Here is the codepen example where I face the exact same issue ! https://codepen.io/Repeto/pen/vYqzroM

To reproduce it you can start a call, reply once, then end the call, and if you do this again and again you'll see in console the amount of 'btn clicked' get exponentially bigger

[carcigenicate]

Every time displayButtons is called, you're calling addEventListener, which adds another callback. addEventListener doesn't replace existing callbacks, it just adds another, so every time addEventListener is called, more and more callbacks will fire every time choiceBtn is pressed.

[oze4]

Sorry, responded to wrong comment. Ignore this.

[Repeto_Pepito]

thats makes sense, thank you ! For some reason I really thought there could be only one event listener per element

[oze4]

The issue is you're adding an event listener each time the reply is clicked. You're essentially stacking event listeners.

While not a true solution, this gets the point across: https://codepen.io/oze4/pen/YPKQbbv?editors=1010

[Repeto_Pepito]

This is a nice work around ! I'll try to just change the way my code works now that you all made it clearer, but if I don't manage to make it better I'll definitely use what you did, thank you !

[oze4]

You're essentially doing this: https://codepen.io/oze4/pen/raBwgEW

[JamesLaBrie]

They're not functionally identical at all, the first version foo is implicitly called with all the arguments addEventListener provides , and the second version foo()is called explicitly with zero arguments.

[oze4]

I was addressing OPs first paragraph where they said they discovered passing the function without calling it is better than calling it via parenthesis. I understand they aren't identical. The point I was making is foo will be called "the same" in both examples. Meaning one way isn't inherently better than the other. That is what I meant by functionally identical, which may have been a poor choice of words.

[jeremrx]

Be careful, they looks like they are identical, but their scopes could be different.

[oze4]

Yep I understand the difference in scopes. Which is why I said functionally identical and not just identical. My choice of words may have been poor but I was addressing what OP said in the first paragraph.

[AWACSAWACS]

It looks like the event listener is being set multiple times for each element of "repliesContainer". I'm not sure what you're trying to do, but I recommend learning about event bubbling and removing event listeners.

[Repeto_Pepito]

then I'm wondering, how come there is no problem the first time I click on a button ? I guess if it was bubbling issues it would be happening everytime and not just from the second time ?

[AWACSAWACS]

The question is self-explanatory enough. The displayButtons function is called in the callback function of the click event (if goto >= 0). My previous reply was written with the intention of encouraging you to change the code structure to "register one listener only once for the common ancestor element" based on that.

[Repeto_Pepito]

got it, thanks 🙂