title: What is the best way to add an event in JavaScript?
body: <p>I see 2 main ways to set events in JavaScript:</p>
  
  <ol>
  <li><p>Add an event directly inside the tag like this:</p>
  
  <p><code>&lt;a href="" onclick="doFoo()"&gt;do foo&lt;/a&gt;</code></p></li>
  <li><p>Set them by JavaScript like this:</p>
  
  <p><code>&lt;a id="bar" href=""&gt;do bar&lt;/a&gt;</code></p></li>
  </ol>
  
  <p>and add an event in a <code>&lt;script&gt;</code> section inside the <code>&lt;head&gt;</code> section or in an external JavaScript file, like that if you're using <strong>prototypeJS</strong>:</p>
  
  <pre><code>Event.observe(window, 'load', function() {
      $('bar').observe('click', doBar);
  }
  </code></pre>
  
  <p>I think the first method is easier to read and maintain (because the JavaScript action is directly bound to the link) but it's not so clean (because users can click on the link even if the page is not fully loaded, which may cause JavaScript errors in some cases).</p>
  
  <p>The second method is cleaner (actions are added when the page is fully loaded) but it's more difficult to know that an action is linked to the tag.</p>
  
  <p>Which method is the best?</p>
  
  <p>A killer answer will be fully appreciated!</p>