Jquery's new event binding mechanism on ()

Today, I browsed the deprecated list of jquery and found live () and die () in it. Now I have a quick look and found that jquery introduced a new event binding mechanism starting with jquery1.7, on () and off () functions handle event binding in a unified manner. Before that, BIND (), live (), and delegate () methods are available to handle event binding, in terms of performance optimization and method unification, jquery decided to launch new functions to unify the event binding method and replace the previous method.

On (events, [selector], [data], FN)
Events: one or more event types and optional namespaces separated by spaces, such as "click" or "keydown. myplugin ".
Selector: the descendant of the selector element used by a selector string to filter trigger events. If the selector is null or omitted, an event is always triggered when it reaches the selected element.
Data: when an event is triggered, the event. data must be passed to the event processing function.
FN: The function executed when the event is triggered. The false value can also be abbreviated as a function, and false is returned.
Replace BIND ()
When the second parameter 'selector 'is null, on () and bind () are basically no different in usage, so we can consider on () only an optional 'selector 'parameter is added to bind (), so on () can easily replace BIND ()

Replace live ()
In
Before 1.4, I believe that everyone would like to use live (), because it can bind events to the current and later elements. Of course, after 1.4, delegate () can also be similar.
Now. The principle of live () is very simple. It delegates events through the document, so we can also use on () to bind events to the document.
The same effect as live.

Live () Statement

$ ('# List li'). Live ('click',' # list li', function (){
// Function code here.
});

Write on ()

$ (Document). On ('click', '# list li', function (){
// Function code here.
});

The key here is that the second parameter 'selector 'is working. It is a filter, and only the child element of the selected element triggers the event.

Replace delegate ()
Delegate ()
It was introduced in 1.4 to delegate the event binding issue of the Child element through the ancestor element. To some extent, it is similar to live. However, live () only uses the document Element
But delegate can be any ancestor node. The ON () method is basically the same as the delegate () method.

Delegate ()

$ ('# List'). Delegate ('lil', 'click', function (){
// Function code here.
});

Write on ()

$ ('# List'). On ('click', 'lil', function (){
// Function code here.
});

It seems that the order of the first and second parameters is reversed, and the other parameters are basically the same.

Summary
Jquery
The launch of on () has two purposes: one is to unify the interface, and the other is to improve the performance, so from now on () replace BIND (), live (),
Delegate. In particular, do not use live () any more, because it is already in the list of unrecommended users and will be killed at any time. If only one event is bound, use one ().
Changed.