Jquery's new binding event mechanism the use of the on method

  • 2020-03-30 02:38:29
  • OfStack

Browsing jQuery's deprecated list, I found that live() and die() were in it. After a quick look, I found that since jQuery1.7, jQuery has introduced a new event binding mechanism, with on() and off() functions handling event binding. Since there were bind(), live(), delegate() and other methods to handle event binding, jQuery decided to introduce new functions to unify the event binding methods and replace the previous methods in terms of performance optimization and unified approach.

On (the events, the selector, [data], fn)

Events: one or more space-separated event types and optional namespaces, such as "click" or "keydown.myplugin".
Selector: a selector string used as a descendant of the selector element of the filter's trigger event. If the selector is null or omitted, the event always fires when it reaches the selected element.
Data: when an event is triggered, event.data is passed to the event handler.
Fn: the function that executes when the event is triggered. The value false can also be shorthand for a function that returns false.

Replace the bind ()
When the second argument 'selector' is null, on() and bind() are essentially the same in terms of usage, so we can assume that on() just has an optional 'selector' argument more than bind(), so on() is a convenient replacement for bind()

Replace the live ()
Before 1.4, you liked live() because it bound events to the current and future elements, and after 1.4, the delegate() could do the same thing. The principle of live() is simple. It delegates events through a document, so we can also use on() to achieve the same effect as live() by binding events to a document.

Live () method

$('#list li').live('click', '#list li', function() { 
  //function code here. 

On (the) way

$(document).on('click', '#list li', function() { 
  //function code here. 

The key here is that the second argument 'selector' is in play. It ACTS as a filter, and only children of the selected element will trigger the event.

Replace the delegate ()
Delegate () was introduced in 1.4 to delegate the issue of event binding to descendant elements via the ancestor element, somewhat like live(). It's just that live() is delegated by the document element, and the delegate can be any ancestor node. The proxy written using on() is basically the same as the delegate().

The delegate () method

$('#list').delegate('li', 'click', function() { 
  //function code here. 

On (the) way

$('#list').on('click', 'li', function() { 
  //function code here. 

It looks like the order of the first argument and the second argument is reversed, everything else is basically the same.

JQuery introduced on () for two purposes, one to unify the interface, the other to improve performance, so from now on () instead of bind (), live (), delegate. In particular, don't use live() anymore, because it's already on the unrecommended list, and it could get killed at any time. If you only bind the event once, then go with one(), which doesn't change.

Related articles: