What is the difference between window.onload = init(); and window.onload = init;

Question

From what I have gathered, the former assigns the actual value of whatever that functions return statement would be to the onload property, while the latter assigns the actual function, and will run after the window has loaded. But I am still not sure. Thanks for anyone that can elaborate.

SInce you gave the correct definition, we don't really know what you're not sure about. Care to elaborate? — Ernest Friedman-Hill, Jan 12 '12 at 04:22
Well the book I am reading said there is a distinct difference, but to me it accomplishes the exact same thing. The function runs after the page loads, what is the point of using either one? — Andy, Jan 12 '12 at 04:26
@ErnestFriedman-Hill—The OP wants an answer of "yes" or "no" and if no, why. — RobG, Jan 12 '12 at 04:27

Adam Rackis · Accepted Answer · 2012-01-12T04:33:15.790

13

window.onload = init();

assigns the onload event to whatever is returned from the init function when it's executed. init will be executed immediately, (like, now, not when the window is done loading) and the result will be assigned to window.onload. It's unlikely you'd ever want this, but the following would be valid:

function init() {
   var world = "World!";
   return function () {
      alert("Hello " + world);
   };
}

window.onload = init();

window.onload = init;

assigns the onload event to the function init. When the onload event fires, the init function will be run.

function init() {
   var world = "World!";
   alert("Hello " + world);
}

window.onload = init;

edited Jan 12 '12 at 04:33

answered Jan 12 '12 at 04:27

Adam Rackis

82,527
56
270
393

1

Any examples on when to use which? – Gaurav Gupta Jan 12 '12 at 04:29
That makes sense, but I guess my question would be, what is the difference between the declaration without the () and the one without? Because both just run when the window is done loading. – Andy Jan 12 '12 at 04:31
@Andy - there's a significant difference - I've elaborated my answer – Adam Rackis Jan 12 '12 at 04:34
1

@Andy: NO, NO, NO, NO, NO!!!!!!! The one without the parentheses runs the function when the window is through loading. The one *with* the parentheses runs the function right when the assignment is done, like perhaps while the HEAD of the page is being evaluated. – Ernest Friedman-Hill Jan 12 '12 at 04:35
I'm sorry, I didn't refresh the page when I put the 2nd comment. You have elaborated Thank you very much. – Andy Jan 12 '12 at 04:37
@Gaurav Gupta - the _only_ reason to use `window.onload = init()` is when `init()` returns another function. If you just want to run a function immediately then call it directly. The whole point of `.onload` (or `.onclick` or any other event handler) is that you give it a function reference so that that function can be run at some point in the future when the event occurs. – nnnnnn Jan 12 '12 at 05:12

score 5 · Answer 2 · answered Jan 12 '12 at 04:37

window.onload = foo;

assigns the value of foo to the onload property of the window object.

window.onload = foo();

assigns the value returned by calling foo() to the onload property of the window object. Whether that value is from a return statement or not depends on foo, but it would make sense for it to return a function (which requires a return statement).

When the load event occurs, if the value of window.onload is a function reference, then window's event handler will call it.

score 2 · Answer 3 · answered May 07 '13 at 13:00

Good answers, one more thing to add:

Browser runtimes ignore non-object (string, number, true, false, undefined, null, NaN) values set to the DOM events such as window.onload. So if you write window.onload = 10 or any of the above mentioned value-types (including the hybrid string) the event will remain null.

What is more funny that the event handlers will get any object type values, even window.onload = new Date is a pretty valid code that will prompt the current date when you log the window.onload. :) But sure nothing will happen when the window.load event fires.

So, always assign a function to any event in JavaScript.

What is the difference between window.onload = init(); and window.onload = init;

3 Answers3

Linked

Related