JavaScript Function in HREF vs OnClick()

Question

I want to run a simple JavaScript function on a click, that is NOT a redirect. Is there any difference or benefit between putting the JavaScript call in <A HREF="javascript:my_function();window.print()" ></A> vs. putting it in the onclick event?

Answer 1

Putting the onclick within the href would offend those who believe strongly in separation of content from behavior/action. The argument is that your html content should remain focused solely on content, not on presentation or behavior.

The typical path these days is to use a javascript library (eg. jquery) and create an event handler using that library. It would look something like:

$('a').click( function() { your_code_here; return false; } );

Answer 2

This question has been discussed before:

http://stackoverflow.com/questions/245868/what-is-the-difference-between-the-different-methods-of-putting-javascript-in-an

Answer 3

Personally, I find putting javascript calls in the HREF tag annoying. I usually don't really pay attention to whether or not something is a javascript link or not, and often times want to open things in a new window. When I try doing this with one of these types of links, I get a blank page with nothing on it and javascript in my location bar. However, this is sidestepped a bit by using an onlick.

Answer 4

In addition to all here, the href is shown on browser's status bar, and onclick not. I think it's not user friendly to show javascript code there.

Answer 5

Having javascript: in any attribute that isn't specifically for scripting is an outdated method of HTML. While technically it works, you're still assigning javascript properties to a non-script attribute, which isn't good practice. It can even fail on old browsers, or even some modern ones (a googled forum post seemd to indicate that Opera does not like 'javascript:' urls).

A better practice would be the second way, to put your javascript into the onclick attribute, which is ignored if no scripting functionality is available. Place a valid URL in the href field (commonly '#') for fallback for those who do not have javascript.

Answer 6

In terms of javascript, one difference is the that this keyword in the onclick will refer to the DOM element whose onclick attribute it is (in this case the <a> element), whereas this in the href will refer to the window object.

In terms of presentation, if an href attribute is absent from a link, i.e. if you write:

<a onclick=" [code] ">

then (by default) most browsers won't use the pointer/hand cursor type when you mouseover the element.

However, if you're asking what is the best way to get dynamic action from the click of a DOM object, then attaching an event using javascript separate from the content of the document is the best way to go. You could do this in a number of ways. A common way is to use a javascript library like jQuery to bind an event to the <a> element like so:

html:

<a id="myLink" href="#">link text</a>

jQuery:

$('a#myLink').click(function(){ do_something(); });

Answer 7

the best way to do this is with:

<a href="#" onclick="someFunction(e)"></a>

The problem is that this WILL add a hash (#) to the end of the page's URL in the browser, thus requiring the user to click the back button twice to go to the page before yours. Considering this, you need to add some code to stop event propagation. Most javascript toolkits will already have a function for this. For example, the dojo toolkit uses

dojo.stopEvent(event);

to do so.