Javascript and Anchor Tags, Best Practice?

Question

Quick Question.

Should we put Javascript in the HREF or use onClick (event)?

Are there any pros/cons to using either one. Personally I think it's easier/cleaner to simply put code in the href, and not have to return false or worry about jumping to #

Are there any known browser specific issues with each method...

Examples:

<a href="javascript: alert('foo!');">Click Me</a>
<a href="#" onClick="alert('foo!');return false">Click Me</a>
<a href="javascript:void(0)" onclick="alert('foo!');">Click Me</a>

Answer 1

1) Rather use onclick. Be sure to have a rational fallback URL in href when JS is not allowed.

2) Rather than onclick="..." , you should use event handler. Find elements using jQuery or XPath, and then for each, call element.addEventListener() .

element.addEventListener("click", function() { alert("bar"); }, false);

Or the old way...

element.onclick = function() { alert("foo"); };

Answer 2

Keeping the code separate from the html is cleaner IMO.

<a id="foo" href="#">Click Me</a>

Then in head or separate js file:

document.getElementByID("foo").onclick = function() { alert("hi"); }

Answer 3

I would personally not put the JavaScript code in the HTML. You should use an event listener that will get triggered when the <a> is clicked on.

<a href="#" id="linkA">Click Me</a>

And then:

document.getElementById('linkA').addEventListener('click', function(e){
    e.preventDefault(); // Prevents page from scrolling to the top
    alert('foo!');
});

Answer 4

In the onclick event (although assigned with JS rather then the attribute) with a sensible href attribute. Build on things that work

Answer 5

Generally, I would externalize JavaScript but use the href to call it:

<a href="javascript:foo('bar!');">Click Me</a>

Although I think your quick alert example is fine as an exception to the rule.

However, if your using a JS library like jQuery you can of course assign events directly - see the first example in jQuery tutorial which looks at the anchor element http://docs.jquery.com/Tutorials:How_jQuery_Works