2

Consider the simple link below:

<a href="#" class="mylink">Link</a>

I understand there are two ways to run a function when a user clicks this element:

$(".mylink").click(function () {

and 

<a href="javascript:myfunction();" class="mylink">Link</a>

Is there a performance difference between the two, or any other practical reason I should use one over the other?

alias51
  • 8,178
  • 22
  • 94
  • 166
  • You may want to read this: http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/ – darthmaim Nov 09 '13 at 14:36
  • I strongly discourage the use of href="javascript..." at all. It has many side effects and will give errors if javascript is turned off. – mplungjan Nov 09 '13 at 15:15

4 Answers4

4

Using $('.mylink').click(function(){ is better as it follows standard event registration model. (jQuery internally uses addEventListener and attachEvent).

Basically registering an event in modern way is the unobtrusive way of handling events. Also to register more than one event listener for the target you can call addEventListener() for the same target.

Read jQuery.click() vs onClick and How does inline Javascript (in HTML) work?

https://softwareengineering.stackexchange.com/questions/86589/why-should-i-avoid-inline-scripting

Community
  • 1
  • 1
Tushar Gupta - curioustushar
  • 58,085
  • 24
  • 103
  • 107
1

They have the same functional behavior, there is no difference whatsoever.

The difference is in code modularity and maintainability.

Using the first method is preferred and more appropriate because it doesn't mix between HTML and JavaScript, a concept called Unobtrusive JavaScript.

If you have worked in the early days of HTML, then you should remember when there were all those attributes like background, color, font ... etc.

Then CSS came in, and everybody told us not to use those old attributes anymore because they mix presentation with document structure, instead we should use CSS to control layout and look of the document.

This is similar to that idea but it is now used for code, separate functionality from document structure.

Edit: Quoting from @mplungjan comment in order to be more accurate:

That there is no difference is not true. href="javascript:myFunction()" does not have the ability to cancel the actual click with a preventDefault or return false. Hence animated gifs will stop running in some browsers and older browsers would even partially unload the page. Also if the function returned a value, the page would be replaced with that value, seen when beginners try href="javascript:window.open..." and get [object object] on the page

Ibrahim Najjar
  • 19,178
  • 4
  • 69
  • 95
  • 2
    That there is no difference is not true. href="javascript:myFunction()" does not have the ability to cancel the actual click with a preventDefault or return false. Hence animated gifs will stop running in some browsers and older browsers would even partially unload the page. Also if the function returned a value, the page would be replaced with that value, seen when beginners try href="javascript:window.open..." and get [object object] on the page – mplungjan Nov 09 '13 at 15:13
  • @mplungjan You are totally correct, but I felt that I should answer from the OP's perspective as it seems he is asking for the difference between the two styles or why would I use this or that or vice vesa. Anyway I will edit my answer to include your comment for an accurate answer. Thank you. – Ibrahim Najjar Nov 09 '13 at 15:17
0

Jquery like any other good JavaScript frameworks supplies you with functionality independent of browser platform wrapping all the intricacies, which you may not care about or don't want to care about.

I think using a framework is better instead of using pure JavaScript and doing all the stuff from scratch, unless you usage is very limited.

I definitely recommend JQuery!

Shiva Saurabh
  • 1,281
  • 2
  • 25
  • 47
-1

The first one is JQuery convention of an event listener. You need to include jquery library in order to use it. The second one is a Javascript convention. You don't need to include any library or extra code to run. There are no differences in terms of performance, but as I told if you do not want to include any kind of library you should use the second example.

regulus
  • 1,572
  • 12
  • 18