JQuery.on () vs binding event to selector?

I am viewing the documents on this page . They have such examples ...

$("p").on("click", function(){ alert( $(this).text() ); }); $("form").on("submit", false) $("form").on("submit", function(event) { event.preventDefault(); }); 

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

 $("p").click(function(){ alert( $(this).text() ); }); $("form").submit(false); $("form").submit(function(event) { event.preventDefault(); }); 

As a final question, why do you want to do this?

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

instead...

  $("form").submit(function(event) { event.preventDefault(); }); 
+6
source share
4 answers

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

The biggest of these articles is that ...

Using the .bind () method is very expensive because it attaches the same event handler to each element mapped 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 โ€œhits for your dollarโ€ when dealing with performance and reacting to dynamically added elements.

What the new .on () method is basically syntactic sugar that can mimic .bind (),. Live () or .delegate () depending on what you call it.

A new direction is to use the new .on method. Familiarize yourself with the syntax and start using it in all jQuery 1.7+ projects.

+7
source

When using .on there are several differences from a specific handler, for example .click etc

  • The purpose of the .on() method is to provide all the functions needed to bind event handlers in a single syntax. You can write sequential syntax using .on instead of combining bundles of .on , .submit or .click .
  • .on supports event delegation, but specific handlers (for example: .click ) do not. More details in the section Direct and delegated events from here.
  • Using .on , you can link multiple event handlers, for example .on('click dblclick')
  • Using .on you can bind namespace events like .on('click.myClick') . More details in the section Event names and namespaces from here
  • Inside .click triggers, so basically you avoid the extra function call. - . click source code

And now the verdict,

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

Why is it better or how is it different from this?

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

$("form").on( better for reasons 1 and 5 above

+5
source

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

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

+3
source
  • Using $.on() , even if you are not using delegation, is good because it introduces familiar and consistent syntax into your code.
  • In addition, it was heavily used in the jQuery source, that is, you can cut out the average person when calling methods like $.bind() .
  • Using $.submit() or $.click() to assign handlers is confusing, as it is also used to trigger these events.

Then the benefit of event delegation is added, which can save you from adding events to hundreds of elements when you only need to add them to one. Suppose you have 100 <td> and would like to alert their contents on click. You can do it:

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

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

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

Voila, only one event was associated, and only one event handler was added to the application. Massive increase in productivity.

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

+2
source

Source: https://habr.com/ru/post/917109/


All Articles