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

Question

I'm a self-proclaimed javascript dunce. I can usually "make it work" when needed, but I'm sure I end up doing things less than optimally 99% of the time. I hope to pick a javascript library/framework and stick with it (i.e. jQuery), but that's not the topic of this question.

This is probably due in large part to the fact that anything I know about javascript has come from right-click -> "view source" and quick google searches. 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

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 3

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.

Answer 4

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 5

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)}"&gt;Drag this to your bookmarks, or right click and bookmark it!</a>

Answer 6

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 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

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 10

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...