JavaScript Event Listener Inline vs. Explicit

Question

I am using Tampermonkey for some webpage manipulation and automation. For this, I add an event listener to the window "load" event. When I define the event handler as an explicit function, it works smoothly and as expected, i.e. the function is called whenever the relevant page is loaded.

window.addEventListener("load", run());

function run() {
    // do something
}

However, when I define the handler inline as follows

window.addEventListener("load", function (){
     // do something
});

then I need to refresh / reload the page several times before the function gets executed.

What is the explanation to have such very different behaviour? I would have expected no difference whether I define the function "explicitly" as in the first example, or "inline" as in the second one. As I have not noticed this before I don't even know whether this is a Tampermonkey issue or a Javascript one.

`("load", run());` should actually be `("load", run);` - you want to *use* that callback on *load* triggering, not execute it at will. So this now changes your question completely I guess. Or it solves it. — Roko C. Buljan, Jan 14 '22 at 13:28
The first snippet really doesn't work as expected, instead of executing `run` after the window has been loaded, it calls `run` immediately when the line `window.addEventListener("load", run());` is met. — Teemu, Jan 14 '22 at 13:30
This is a duplicate of [Why does click event handler fire immediately upon page load?](https://stackoverflow.com/q/7102413) or [What is the difference between a function call and function reference?](https://stackoverflow.com/q/15886272) — wOxxOm, Jan 14 '22 at 15:07

t.niese · Accepted Answer · 2022-01-14T13:40:27.690

window.addEventListener("load", run()); does not run the run function on load but immeditaly and the value returned by run is then used as callback (which is likely undefined). This is a duplicate to addEventListener calls the function without me even asking it to

About the:

then I need to refresh / reload the page several times before the function gets executed.

You then likely register the event listener to late (at a point when the page was possibly already loaded).

I don't even know whether this is a Tampermonkey issue or a Javascript one.

It is none of these, it is a false assumption from your side that the site cannot be already loaded at the time you register the load event.

You like want to have something similar to the ready function of jQuery which an example implementation without jQuery can be found here $(document).ready equivalent without jQuery.

Roko C. Buljan · Answer 2 · 2022-01-14T13:45:06.967

Tl;Dr: pass your function, don't execute it. Let the "load" listener handler execute it instead:

window.addEventListener("load", run);

run() executes your function, and returns undefined by default: *window.addEventListener("load", undefined); // and executed. *

window.addEventListener("load", run()); // run() executes immediately

function run() {
  // do something
}

If run() returns another function — than this is fine

window.addEventListener("load", run()); // run() executes immediately  
                                        // but returns a function in its place.

function run() {
  return function() {
    // do something
  }
}

since now you're not passing undefined — but an actual function.

JavaScript Event Listener Inline vs. Explicit

2 Answers2