title: Trying to understand the concepts behind javascript event handlers
body: <p>As a beginner in javascript, one is slightly confused with the </p>
  
  <pre><code>addEventListener()
  </code></pre>
  
  <p>function, as opposed to the use of </p>
  
  <pre><code>variable.onclick
  </code></pre>
  
  <p>Here is the code that I am testing it with</p>
  
  <pre><code>    /*
       * A simple function to swap the text of two elements        
       */
       function swapFunction(){
          var siteTitle   = document.getElementById("site_title");
          var siteText    = document.getElementById("site_text");
  
          var temp            = siteTitle.innerHTML;
          siteTitle.innerHTML = siteText.innerHTML;           
          siteText.innerHTML  = temp;
          return false;
       } 
  
       /*
        * A function to handle the page load
        */
       function fullyLoaded(){            
          var testEvent =       document.getElementById("test_click");            
  
          /* 
           * Why does the line that has been commented out not work
           * Yet the line beneath it does?
           */
  
          //testEvent.addEventListener("click", swapFunction(), false);
          testEvent.onclick = swapFunction;
      }
  
      window.onload = fullyLoaded;        
  </code></pre>
  
  <p>Html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;This is a test application&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1 id="site_title"&gt;Welcome To My Site&lt;/h1&gt;
  &lt;p id="site_text"&gt;This is a test site that I am practicing on&lt;/p&gt;
  &lt;a id="test_click" href="#"&gt;test click&lt;/a&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Please help to explain the concept of event handlers and addEventListener() or attachEvent() in IE</p>
  
  <p>Thanks in advance </p>