Tips on 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 ()

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, delegate () After 1.4 () you can also do similar things. 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 to achieve the same effect as live.

Live () Statement

Copy codeThe Code is as follows: $ ('# list li'). live ('click',' # list li', function (){
// Function code here.
});

Write on ()
Copy codeThe Code is as follows: $ (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 () is introduced in 1.4. It aims to delegate the event binding issue of the Child element through the ancestor element. To some extent, it is similar to live. However, live () is delegated by the document element, while delegate can be any ancestor node. The on () method is basically the same as the delegate () method.

Delegate ()

Copy codeThe Code is as follows: $ ('# list'). delegate ('li', 'click', function (){
// Function code here.
});

Write on ()
Copy codeThe Code is as follows: $ ('# 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 launches on () for two purposes. One is to unify the interface, and the other is to improve the performance. Therefore, from now on () is used to 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 (). This is not changed.