In jquery bind (), Live (), delegate (), on () Bind event method instance detailed _jquery

This example analyzes the bind (), Live (), delegate (), on () binding event method in jquery. Share to everyone for your reference, specific as follows:

Objective

Because the project often has the use of jquery operations DOM elements of additions and deletions, so it will involve the DOM element binding event way, simply summed up the difference between the Bind,live,delegate,on, so that later, and hope that the article will help friends in the future, If there is any improper in the text, I also hope that you will correct me, and say nothing more, and go directly to the point.

One, bind ()

Brief description

Bind () adds one or more event handlers to the matching element.

How to use

Copy Code code as follows:

$ (selector). bind (Event,data,function)

Event: Required items, one or more events added to the element, such as Click,dblclick;

Single Event Processing: for example

Copy Code code as follows:

$ (selector). bind ("click", Data,function);

Multi-Event handling: 1. Use a space to separate multiple events, such as

Copy Code code as follows:

$ (selector). bind ("Click Dbclick mouseout", data,function);

2. Use curly braces to define multiple events flexibly, for example

Copy Code code as follows:

$ (selector). Bind ({event1:function, event2:function, ...})

3. Space separated way: binding more rigid, can not give the event to bind the function alone, suitable for handling multiple events call the same function;

Braces alternative: Binding is more flexible, you can give the event a separate binding function;

data: optional; parameters to be passed;
function: required; functions that need to be executed when the binding event occurs;

Give an example to explain

Available in jquery version

jquery1.7 and above version; jquery1.7 version is used to replace bind (), Live () binding event mode;

The similarities and differences and advantages and disadvantages of five or four kinds of methods

Same point:

1. Support for single element multiple event binding, space separated method or curly braces substitution method;
2. Through event bubbling, the event is transmitted to the document for the response of the event;

Comparison and Contact:

The 1.bind () function can only set events for elements that already exist, but live (), on (), delegate () Support event settings for future additions, and the demo code is as follows:

The 2.bind () function was highly recommended before the jquery1.7 version, and the 1.7 version came out, the official did not recommend bind (), the substitution function is on (), this is also the 1.7 version of the newly added function, also can be used to replace the live () function, Live () The function has been deleted in version 1.9;

The 3.live () function is similar to the delegate () function, but the live () function is less delegate () in terms of execution speed, flexibility, and CSS selector support (), for details, refer to this jquery. bind (),. Live () Analysis of differences between and. Delegate ()

4.bind () support all versions of jquery, Live () support jquery1.8-;delegate () support Jquery1.4.2+;on () support jquery1.7+;

Vi. Summary

If you refer to the jquery version as a low version in your project, the delegate () is recommended, and the high version of jquery can be replaced with on (), above for personal opinion, and if you have a different idea, welcome to the brick Exchange.

For more information on jquery event-related content readers can view the site: "A summary of common events in jquery usage and skills"

I hope this article will help you with the jquery program design.