Javascript And Anchor Tags, Best Practice?

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

Solution 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"); };

Solution 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"); }

Solution 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 topalert('foo!');
});

Solution 4:

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

Solution 5:

Generally, I would externalize JavaScript but use thehref 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