What are the benefits and/or pitfalls of calling a function directly from an anchor tag vs creating events onload?

Question

Is there a proper/standard way?

<a href="#" onclick="function();">Link</a>

vs

<script>
$(document).ready(function(){
   $('#link1').click(function(){ ... });
});
</script>
<a href="#" id="link1">Link</a>

Answer 1

Personally I prefer the second. It allows me to separate my markup and script. This means that scripts could be placed in a separate file and since scripts are static resources they get cached, minified, obfuscated, ... And reduced markup size obviously leads to reduced bandwidth and so faster loading site. In a web page there are really 3 notions that should not be mixed:

• markup
• scripting
• styling

Answer 2

From the top of my head:

1. The first one only allows one handler per time on a single element
2. The first one cannot have access to anything but global scope
3. The first one doesn't allow for event delegation, because some events need to use event capture in standards compliant browsers for delegation to work (namely blur and focus), and you cannot select whether to use capture or bubble there.
4. The first one ... read @DarinDimitrov's answer.

You would use the first one when... ask facebook or hotmail. I've got nothing on that.