jQuery .on() versus tying event to selector?

Question

I am looking over the docs on this page. They have examples like these ...

$("p").on("click", function(){
alert( $(this).text() );
});

$("form").on("submit", false)

$("form").on("submit", function(event) {
  event.preventDefault();
});

Why is this better or how is it different than this ...

$("p").click(function(){
alert( $(this).text() );
});

$("form").submit(false);

$("form").submit(function(event) {
  event.preventDefault();
});

As a final question why would you want to do this ...

$("form").on("submit", function(event) {
  event.stopPropagation();
});

instead of ...

  $("form").submit(function(event) {
      event.preventDefault();
  });

I tried to answer this here http://stackoverflow.com/a/10827586/344304 — Prasenjit Kumar Nag, May 31 '12 at 15:38
possible duplicate of [Difference between .on('click') vs .click()](http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click) — Felix Kling, May 31 '12 at 15:38
It's not necessarily better, but since the examples are in the `.on` documentation, it makes sense to make us of `.on` there ;) — Felix Kling, May 31 '12 at 15:39
one reason can be now, `click` and `submit` uses `$.on` themselves under the hood in jQuery source. So it's good to adopt with it. — Prasenjit Kumar Nag, May 31 '12 at 15:41
It's interesting to see that so many seem to have this question since the introduction of `.on`. Its primary purpose is to unify the the event handling methods `.bind`, `.live` and `.delegate`. Nothing changed for the shorthand methods. The only difference is that they were using `.bind`, now they are using `.on`. Your question can be answered by any other answer that was given to "What is the difference between `.bind` and `.click`". They are shorthand methods for convenience, you are free to use whatever you prefer. — Felix Kling, May 31 '12 at 15:51
@FelixKling that's not entirely true, according to Souflane Hassou's answer. — 11684, May 31 '12 at 15:57
@FelixKling you should read the article linked to by Souflane. It's very interesting! — 11684, May 31 '12 at 16:07
@11684: Yeah, I read it, but I don't see how this is relate to my comment or shorthand methods. The article does not even mention them and rightly so: They have nothing to do with the whole `.live`, `.delegate`, `.bind` methods/problematic, they are just convient wrappers for `.bind` (`.on`). There is no better it's just a matter of personal preference. — Felix Kling, May 31 '12 at 16:12
Thanks for all the answers and links. @felex "there is no better ...". Is there a best practice? What is the preferred way that they should be used from a maintainability point of view and for the programmer that must maintain them when I no longer do? (python guy here, i hate ambiguity when it comes to these things :) ) — Ominus, Jun 01 '12 at 13:58

score 7 · Accepted Answer · answered May 31 '12 at 15:36

Differences Between jQuery .bind() vs .live() vs .delegate() vs .on()

The biggest take aways from this article are that...

Using the .bind() method is very costly as it attaches the same event handler to every item matched in your selector.

You should stop using the .live() method as it is deprecated and has a lot of problems with it.

The .delegate() method gives a lot of "bang for your buck" when dealing with performance and reacting to dynamically added elements.

That the new .on() method is mostly syntax sugar that can mimic .bind(), .live(), or .delegate() depending on how you call it.

The new direction is to use the new .on method. Get familiar with the syntax and start using it on all your jQuery 1.7+ projects.

All the shorthand methods are just syntactic sugar as well. You did not actually explain what the difference is between them and `.on`. — Felix Kling, May 31 '12 at 16:14

Selvakumar Arumugam · Answer 2 · 2012-05-31T16:05:31.557

There are few differences when using .on instead of specific handler such as .click e.t.c.

The purpose .on() method is to provides all functionality required for attaching event handlers in one syntax. You can write a consistent syntax using .on instead of mix of bunch .on, .submit or .click.
.on supports event delegation but specific handlers (ex: .click) does not. Read more under section Direct and delegated events from here
Using .on you can bind multiple event handler like .on('click dblclick')
Using .on you can bind namespace events like .on('click.myClick'). Read more under section Event names and namespaces from here
Internally .click triggers .on so basically you are avoiding an extra function call. - .click source code

And now the verdict,

$("form").on("submit", function(event) { event.preventDefault(); });

Why is this better or how is it different than this

$("form").submit(function(event) { event.preventDefault(); });

$("form").on( is better as for the reason 1 and 5 stated above

score 3 · Answer 3 · answered May 31 '12 at 15:37

The click, submit, etc methods are simply convenience methods for their respective on and trigger equivalents.

I would only use them if I believed that they improve the readability of the code. In general however I find the on and trigger methods express the intent of the code more clearly.

Sampson · Answer 4 · 2012-05-31T15:44:13.313

Using $.on(), even when you're not using delegation is good because it introducing a familiar and consistent syntax into your code.
Additionally it's used heavily in the jQuery source, meaning you can cut out the middle-man when calling methods like $.bind().
Using $.submit() or $.click() to assign handlers is confusing since it is also used to trigger those events.

Then there's the added benefit of event-delegation, which can save you from adding events to hundreds of elements when it's only necessary to add to one. Suppose you had 100 <td> element and you wanted to alert their contents on click. You could do this:

$("td").click(function(){
    alert( $(this).text() );
});

But now you've added 100 new event handlers. Really bad for performance. Using $.on(), you can bind to just the <table>, and examine all events to see what raised them. If it was a <td>, you can respond accordingly:

$("table").on("click", "td", function(){
    alert( $(this).text() );
});

Voila, only one event has been bound, and only one event handler was introduced into the application. Massive performance increase.

This is one of the biggest reasons why $.on() trumps $.click() or $.submit() any day.

jQuery .on() versus tying event to selector?

4 Answers4