JavaScript - Calling a function with and without parens
<p>Take your time, I'm not going to rush to accept the first answer which comes along. I prefer a well thought out answer please. Take the following code:</p>

<p>HTML</p>

<pre><code>&lt;button id="button&gt;click me&lt;/button&gt;
</code></pre>

<p>JS - VERSION 1</p>

<pre><code>window.onload = init;

function init() {
    console.log('init called');
    var button = document.getElementById('button');
    button.onclick = buttonClickHandler;
}

function buttonClickHandler() {
    console.log('button clicked');
}
</code></pre>

<p>vs Same HTML</p>

<p>JS - VERSION 2</p>

<pre><code>window.onload = init();
</code></pre>

<p>In both cases, 'init called' appears in the console "immediately", but in the second case, it is followed by an error stating button is null.</p>

<p>There are 2 things at play here. 1) In version 1, it waits for the DOM to load 2) in version 2, it's happening before the DOM is loaded, or so it seems.</p>

<p>My question. Please explain as clearly as possible what is happening in version 1 vs what is happening in version 2. What are the technical terms for what <code>window.onload = init</code> is vs  what <code>window.onload = init()</code> is? Also please explain each versions behaviour. Why does 1 wait, but 2 doesn't?</p>

<p>The script needs to go before the button element e.g. in the head: <a href="http://jsfiddle.net/XMEjr/1/" rel="nofollow">http://jsfiddle.net/XMEjr/1/</a></p>
