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.

Improve this question
7
  • 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. Commented Apr 13, 2015 at 22:07
  • .click() always works better Commented Apr 13, 2015 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. Commented Apr 13, 2015 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? Commented Apr 13, 2015 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. Commented Apr 13, 2015 at 22:14

5 Answers 5

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

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.
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.
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
});
Improve this answer

Comments

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.

Improve this answer

1 Comment

Another thing to consider is jQuery is a great skill to know. Personally I wish I learned it sooner.
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.

Improve this answer

Comments

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.