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 stackoverflow.com/a/10827586/344304 — Prasenjit Kumar Nag
– Prasenjit Kumar Nag, Commented May 31, 2012 at 15:38
possible duplicate of Difference between .on('click') vs .click() — Felix Kling
– Felix Kling, Commented May 31, 2012 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
– Felix Kling, Commented May 31, 2012 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
– Prasenjit Kumar Nag, Commented May 31, 2012 at 15:41

Soufiane Hassou · Accepted Answer · 2012-05-31 15:36:22Z

7

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.

answered May 31, 2012 at 15:36

Soufiane Hassou

17.8k2 gold badges42 silver badges76 bronze badges

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

1 Comment

Felix Kling Over a year ago

All the shorthand methods are just syntactic sugar as well. You did not actually explain what the difference is between them and .on.

Selvakumar Arumugam · Accepted Answer · 2012-05-31 16:05:31Z

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

Rich O'Kelly · Accepted Answer · 2012-05-31 15:37:01Z

3

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.

answered May 31, 2012 at 15:37

Rich O'Kelly

41.8k9 gold badges87 silver badges114 bronze badges

Comments

Sampson · Accepted Answer · 2012-05-31 15:44:13Z

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.

Collectives™ on Stack Overflow

jQuery .on() versus tying event to selector?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related