Tips on jQuery's new event binding mechanism on ()

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.