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!');
});