Description:-
The following are two methods of building a link that has the sole purpose of running JavaScript code. Which is better, in terms of functionality, page load speed, validation purposes, etc.?
First Example:-
function myJsFunc() {
alert("myJsFunc");
}
<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>
Second Example:-
function myJsFunc() {
alert("myJsFunc");
}
<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>
Three reasons. Encouraging the
use of
# amongst a team of developers inevitably leads to some
using the return value of the function called like this:
function doSomething() {
//Some code
return false;
}
But then they forget to use
return doSomething() in the onclick and just use doSomething().
A second reason for avoiding
# is
that the final return
false; will not execute if the
called function throws an error. Hence the developers have to also remember to
handle any error appropriately in the called function.
A third reason is that there
are cases where the
onclick event property is assigned dynamically. I prefer to
be able to call a function or assign it dynamically without having to code the
function specifically for one method of attachment or another. Hence my onclick (or
on anything) in HTML markup look like this:
onclick="someFunc.call(this)"
OR
onclick="someFunc.apply(this,
arguments)"
Using
javascript:void(0) avoids all of the above headaches, and I haven't
found any examples of a downside.
So if you're a lone developer
then you can clearly make your own choice, but if you work as a team you have
to either state:
Use
href="#", make sure onclick always
contains return
false; at the end, that any called
function does not throw an error and if you attach a function dynamically to
the onclick property make sure that as well as not throwing an
error it returns false.
OR
href="javascript:void(0)"
The second is clearly much
easier to communicate.
Thanks for comments.....