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