Question

What is the best way and why?

Href?

<a href="javascript:helloworld()">link</a>

onclick?

<a href="#" onClick="helloworld()">link</a>

bind by framework (e.g. jquery)?

<a id="foo" href="#">link</a>
…
$('#foo').live('click',helloworld);

Answer 1

It depends. Usually, you should never have a link that does nothing. What if your users have JavaScript disabled, or it fails to load? You must degrade gracefully to have an accessible website. So, for example, if you have a box that loads with Ajax, you should have it link to an alternative page, then bind the handler in unobtrusive, separate JavaScript:

<a class="loadPage" href="actualPage.php">Go to my page</a>

and in another file:

$('.loadPage').click(function(e) {
    // Load with Ajax...
    e.preventDefault(); // Stop the link from going through
});

If the links were generated with JavaScript, then it’s okay to use # as an href most of the time. However, in that case, you should still be attaching the handlers with JavaScript as opposed to setting onclick in innerHTML (*shudder*).

So, generally: if you have an onclick attribute or javascript: link in production code, right in your HTML, you’re not separating content, behaviour and presentation; you’re not being accessible; and you’re not being semantic. Don’t do it!