title: JavaScript functions on event handlers and issue with execution
body: <p>I have a question regarding why functions are called with <code>()</code> in some situations and not others. Take below for example. The test function is explicitly called by <code>test()</code> when the button is clicked.</p>
  
  <pre><code>  &lt;!DOCTYPE html&gt;
      &lt;html&gt;
        &lt;head&gt;
        &lt;/head&gt;
        &lt;body&gt;
          &lt;h1&gt;Hello&lt;/h1&gt;
          &lt;input type="button" value="click" onclick="test()"/&gt;
          &lt;p id="p1"&gt;Test&lt;/p&gt;
  
           &lt;script&gt;
            function test()
            {
              document.getElementById("p1").innerHTML = "Hello World";
            }
          &lt;/script&gt;
        &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p><strong>Whereas see below example:</strong> The function is not called with <code>()</code> (i.e. its not immediately invoked). It simply called as <code>test</code> If I changed the below function to an anonymous function, it will work as well. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;Hello&lt;/h1&gt;
      &lt;input id = "b1" type="button" value="click"/&gt;
      &lt;p id="p1"&gt;Test&lt;/p&gt;
       &lt;script&gt;
  
        function test()
        {
  
          document.getElementById("p1").innerHTML = "Hello World";
        }
         var but = document.getElementById("b1");
         but.addEventListener("click", test, false);
  
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Is there a reason why in case of both event listeners (i.e. the on click event), one type does not require the parenthesis on the function call and the other does?</p>