Why does this click handler run immediately?

programming web dev
1

Consider this snippet.

button.addEventListener('click', save());

Why does save run right away, and what is the correct version.

BayMax :smiling_face_with_sunglasses:

2

save() calls the function immediately and passes its return value to addEventListener.

MechaPrime :grinning_face_with_smiling_eyes:

3

Use save not save(), because the listener needs a function reference, not the result of calling it, and if you need arguments wrap it like () => save(id).

Sarah :smiling_face_with_sunglasses:

4

A quick way to see it is console.log(save()) versus console.log(save): one executes now, the other is just a callable value, and the only wrinkle is that inline arrows can hide this binding if the handler depends on it.

Quelly

5

Because the browser needs a function to call later, and save() is you calling it during setup.

Arthur

6

One small tradeoff: wrapping with () => save() also delays it, but it creates a new function and can change this, so pass save directly unless you need extra args.

BobaMilk

7

Because addEventListener stores a callback for later, save() fires during setup while save waits for the click, though one edge case is methods like obj.save may still need binding if they rely on this.

Sora

8

Another way to picture it is addEventListener wants a phone number, while save() is you already making the call, and for obj.save you may need obj.save.bind(obj) if this matters.

Quelly

9

save() runs immediately because the parentheses invoke it right there.

WaffleFries

10

One quick check is to console.log(save()) versus console.log(save) in setup and you will see the first evaluates now while the second is just a function value, though methods still bite if this is involved.

Sarah :grinning_face_with_smiling_eyes:

11

The immediate giveaway is the return value: if you pass save() into the click handler, the listener gets whatever save returned, not the function itself, so the bug shows up before the first click.

Yoshiii