What's the purpose (if any) of “javascript:” in event handler tags?

Question

I've been making a concerted effort to improve my javascript skills lately by reading as much javascript code as I can. In doing this I've sometimes seen the javascript: prefix appended to the front of event handler attributes in HTML element tags. What's the purpose of this prefix? Basically, is there any appreciable difference between:

onchange="javascript: myFunction(this)"

and

onchange="myFunction(this)"

?

Answer 1

Probably nothing in your example. My understanding is that javascript: is for anchor tags (in place of an actual href). You'd use it so that your script can execute when the user clicks the link, but without initiating a navigation back to the page (which a blank href coupled with an onclick will do).

For example:

<a href="javascript:someFunction();">Blah</a>

Rather than:

<a href="" onclick="someFunction();">Blah</a>

Answer 2

It should not be used in event handlers (though most browsers work defensively, and will not punish you). I would also argue that it should not be used in the href attribute of an anchor. If a browser supports javascript, it will use the properly defined event handler. If a browser does not, a javascript: link will appear broken. IMO, it is better to point them to a page explaining that they need to enable javascript to use that functionality, or better yet a non-javascript required version of the functionality. So, something like:

<a href="non-ajax.html" onclick="niftyAjax(); return false;">Ajax me</a>

Edit: Thought of a good reason to use javascript:. Bookmarklets. For instance, this one sends you to google reader to view the rss feeds for a page:

var b=document.body;
if(b&&!document.xmlVersion){
  void(z=document.createElement('script'));
  void(z.src='http://www.google.com/reader/ui/subscribe-bookmarklet.js');
  void(b.appendChild(z));
}else{
  location='http://www.google.com/reader/view/feed/'+encodeURIComponent(location.href)
}

To have a user easily add this Bookmarklet, you would format it like so:

<a href="javascript:var%20b=document.body;if(b&&!document.xmlVersion){void(z=document.createElement('script'));void(z.src='http://www.google.com/reader/ui/subscribe-bookmarklet.js');void(b.appendChild(z));}else{location='http://www.google.com/reader/view/feed/'+encodeURIComponent(location.href)}">Drag this to your bookmarks, or right click and bookmark it!</a>

Answer 3

It should only be used in the href tag.

That's ridiculous.

The accepted way is this:

<a href="/non-js-version/" onclick="someFunction(); return false">Blah</a>

But to answer the OP, there is generally no reason to use javascript: anymore. In fact, you should attach the javascript event from your script, and not inline in the markup. But, that's a purist thing I think :-D

Answer 4

The origins of javascript: in an event handler is actually just an IE specific thing so that you can specify the language in addition to the handler. This is because vbscript is also a supported client side scripting language in IE. Here's an example of "vbscript:".

In other browsers (as has been said by Shadow2531) javascript: is just a label and is basically ignored.

href="javascript:..." can be used in links to execute javascript code as DannySmurf points out.

Answer 5

javascript: in JS code (like in an onclick attribute) is just a label for use with continue/goto label statements that may or may not be supported by the browser (probably not anywhere). It could be zipzambam: instead. Even if the label can't be used, browsers still accept it so it doesn't cause an error.

This means that if someone's throwing a useless label in an onclick attribute, they probably don't know what they're doing and are just copying and pasting or doing it out of habit from doing the below.

javascript: in the href attribute signifies a Javascript URI.

Example:

javascript:(function()%7Balert(%22test%22)%3B%7D)()%3B

Answer 6

I am no authority in JavaScript, and perhaps more of a dunce than the asker, but AFAIK, the difference is that the javascript: prefix is preferred/required in URI-contexts, where the argument may be as well a traditional HTTP URL as a JavaScript trigger.

So, my intuitive answer would be that, since onChange expects JavaScript, the javascript: prefix is redundant (if not downright erroneous). You can, however, write javascript:myFunction(this) in your address bar, and that function is run. Without the javascript:, your browser would try to interpret myFunction(this) as a URL and tries to fetch the DNS info, browse to that server, etc...

Answer 7

@mercutio

That's ridiculous.

No, it's not ridiculous, javascript: is a pseudo protocol that can indeed only be used as the subject of a link, so he's quite right. Your suggestion is indeed better, but the best way of all is to use unobtrusive javascript techniques to iterate over HTML elements and add behaviour programmatically, as used in libraries like jQuery.

Answer 8

Basically, is there any appreciable difference between: onchange="javascript: myFunction(this)" and onchange="myFunction(this)" ?

Assuming you meant href="javascript: myFunction(this)", yes there is, especially when loading content using the javascript. Using the javascript: pseudo protocol makes the content inaccessible to some humans and all search engines, whereas using a real href and then changing the behaviour of the link using javascript makes the content accessible if javascript is turned off or not available in the particular client.

Answer 9

Flubba:

Use of javascript: in HREF breaks "Open in New Window" and "Open in New Tab" in a Firefox and other browsers.

It isn't "wrong", but if you want to make your site hard to navigate...

Answer 10

I don't know if the javascript: prefix means anything within the onevent attributes but I know they are annoying in anchor tags when trying to open the link in a new tab. The href should be used as a fall back and never to attach javascript to links.