1

I'm rather new to jQuery but i want to know what the best practice is when making a button do something.

Should i use .click()

HTML 

<button id="submit" class="btn btn-default">Submit</button>

JS 

$('#submit').click(function(){
    //DO SOMETHING
});

Or call a function

HTML 

<button class="btn btn-default" onclick="Submit();">Submit</button>

JS 

function Submit() {
    //DO SOMETHING
}

My question is, do these two methods behave the same way? If not, what are the advantages of one over the other.

*I've tried and seems to work the same way but being new to jQuery i wanted to make sure.

Taylor C
  • 368
  • 5
  • 15
  • They do the same thing, but you generally want to avoid inline event handlers, so the former is probably better, as would just using `addEventListener` be etc. – adeneo Apr 13 '15 at 22:07
  • `.click()` always works better – yaakov Apr 13 '15 at 22:08
  • They're similar but not exactly the same in some important ways. Among the more outstanding differences is that via jQuery it's possible to have *multiple* separate handlers, whereas a DOM element node only has one "onclick" property. – Pointy Apr 13 '15 at 22:09
  • @Pointy When you say multiple separate handlers, do you mean that if i have multiple objects tagged `#submit` they would all perform `//DO SOMETHING`? – Taylor C Apr 13 '15 at 22:13
  • to use `onclick="Submit();"` Submit has to be a global function (attached to window) which is bad practice. All your functions should be wrapped somehow to keep them out of non-namespaced globals., obviously there are ways around this with a namespaced global property. One caveat, if you are using a framework like rivets or angularJs you would use something like ng-click or rv-click inside the element. – Shanimal Apr 13 '15 at 22:14
  • No. I mean that multiple separate event handlers can be registered for a single DOM element. Each subsequent call to the jQuery `.click()` method adds a separate distinct handler. That said, it's *also* true that if a jQuery selector matches multiple objects, then the handler will be added to *all* of them. – Pointy Apr 13 '15 at 22:15
  • @Pointy With Jacob's answerand your comment i think i understand it now – Taylor C Apr 13 '15 at 22:21

5 Answers5

2

They do not behave the same way (internally).

Using onClick binds the click event directly to a function which is slighly better for performance.

JQuerys .click() adds an event listener which has several advantages (besides being more readable).

  • It allows adding more than a single handler for an event. This is particularly useful for DHTML libraries or Mozilla extensions that need to work well even if other libraries/extensions are used.
  • It gives you finer-grained control of the phase when the listener gets activated (capturing vs. bubbling)
  • It works on any DOM element, not just HTML elements.

See this answer for more in depth info: jQuery.click() vs onClick

Community
  • 1
  • 1
Jacob Sievers
  • 506
  • 4
  • 13
  • 1
    For future reference, if you notice that the question is a duplicate to another Stack Overflow question (as you have based on the link you provide), flag the question as a duplicate of that question. – ryanyuyu Apr 13 '15 at 22:25
  • Internally it works differently but it is so fast the user can not tell. Overall I think jQuery is a great skill to learn and I would pick `click()` over `onClick`. – Jon Doe Apr 14 '15 at 13:59
1

Here are my two preferred options.

Using click() in jQuery should do the same thing as onClick (even though they technically work differently) so I see no reason to pick onClick over click(). The other thing is if you ever build a Chrome extension onClick is not allowed.

Example:

$(element).click(function(){
   ...
});

Your other option is use the on() function. Unlike click() which watches a specific element on() will watch everything (in the context you define) for a event. This is useful if you have dynamic elements with the same class.

$(element).on('click', function(){
   ...
});

Both functions are useful and which depends on the situation. To answer your original question: no I see no reason to use onclick over click().

Hope that is no too off topic but that info I whish I knew when I started.

Jon Doe
  • 2,172
  • 1
  • 18
  • 35
1

For maintainability and readability you should keep HTML and JavaScript separate. The problem with onclick="Submit();" is that a JavaScript snippet Submit() is being embedded inside of an HTML attribute. Conceptually, this is similar to another technique that should be avoided, inline styles, where HTML and CSS are intermixed.

Enforcing a separation of languages makes it easier to make changes in future. As an example let's say you start with this:

$('#submit').click(function(){
    //DO SOMETHING
});

Which attaches functionality to a form button submit.

But, down the road, you realize that pressing enter/return on a text input will also submit an HTML form. To handle this, all you need to do is change one line of JavaScript:

$('#myform').on("submit", function(){
    //DO SOMETHING
});
leepowers
  • 37,828
  • 23
  • 98
  • 129
0

Those two methods basically do the same thing. However, there is one distinct difference. The onclick attribute can only be used to bind one event, the jQuery click event can be bound multiple times on the same element.

Other than that, it's usually easier to maintain code where the markup is separated from the JavaScript code. By using the onclick attribute you have some JavaScript code mixed in with the markup.

Also, using jQuery to bind events means that you can bind an event on multiple elements at once, instead of having an attribute on each element.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
-1

The .click(function(){...}); requires the browser to load jquery before performing that function but the latter i.e. function Submit(){...} is pretty more direct and requires less initial website loading time compared to the jquery method. But it's all pretty much the same in the eyes of the front end user.

David says Reinstate Monica
  • 19,209
  • 22
  • 79
  • 122
Genius Osae
  • 15
  • 1