What is the Difference between onclick and href="javascript:function name?

Question

Is there any difference between

1 : <a href="javascript:MyFunction()">Link1</a>

and

2 : <a href="#" onclick="MyFunction()">Link2</a>

? Would one affect the page performance by any means ?

Answer 1

If your element is not actually supposed to link the user someplace, don't make it an anchor element. If you're using <a> tags just to get the underline/cursor change - don't. Use CSS on a <span> (or other element) instead.

span.link {
  text-decoration: underline;
  color: blue;
  cursor: pointer;
}

Keep your HTML semantic and use anchor elements only when you want to link the user somewhere.

Answer 2

No performance difference.

The first is crap because it will fail completely for users without JS enabled.

The second is still crap, but would be better if the href pointed to a URL for users without JS enabled.