Question

There are several ways to define click action on anchor tag like:

<a href="javascript: void(0)" onclick="funciton_X()">click here</a>

or

<a href="javascript: funciton_X()">click here</a>

or

<a id="a_tag" href="javascript: void(0)">click here</a>  
<script type="text/javascript">  
$('#a_tag').click(function(){})  
</script>

Is there a significant difference which one will I use? What are their advantages and disadvantages. Is there a fourth option?

Answer 1

The last one is called unobtrusive javascript and it’s the one I would recommend you using as it advocates a clear separation between your markup and javascript. It also has also the advantage of smaller markup files, while external javascript files would be cached by the client browsers.

As @David Dorward pointed out in the comments section if you are using the last method it is recommended to have the href attribute point to some real url so that the client will be redirected if for example he has javascript disabled. This technique is called progressive enhancement when you define a minimal markup of your site and based on the client browser capabilities you enrich with functionality that’s not available with markup such as AJAX and some other nice UI effects.

So to summarize:

<a id="a_tag" href="basic.htm">click here</a>

and then in a separate javascript file (example with jQuery but you could use anything you like):

$(function() {
    $('#a_tag').click(function() {
        // TODO: some nice effect
        return false;
    });
});