JQ bind event Bind (), Live (), delegate (), on () advantages and disadvantages

Objective

Because the project often has the use of jquery operations DOM elements of additions and deletions, so it will involve the DOM elements of the binding event, simply summed up the difference between the Bind,live,delegate,on, so that later, and hope that the article will help the future of the Garden friends, 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.

Bind ()

Brief description

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

How to use

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

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

Single Event Processing: for example $ (selector). bind ("click", Data,function);

Multi-Event handling: 1. Use a space to separate multiple events, such as $ (selector). bind ("Click Dbclick mouseout", data,function);

2. Use curly braces to define multiple events flexibly, such as $ (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
View Code

Available in jquery version

All versions are available, but according to the official website, the bind () function is recommended to be replaced with on () since the jquery1.7 version.

Live ()

Brief description

Live () adds one or more event handlers to current or future matching elements;

How to use

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

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

Single Event Processing: for example $ (selector). Live ("click", Data,function);

Multi-Event handling: 1. Use a space to separate multiple events, such as $ (selector). Live ("Click Dbclick mouseout", data,function);

2. Use curly braces to define multiple events flexibly, such as $ (selector). Live ({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;

Illustrate View Code

Available in jquery version

The jquery1.9 version has the following support, jquery1.9 and above versions have removed this method, jquery1.9 the above version is replaced with the On () method.

Delegate ()

Brief description

Delegate () adds one or more event handlers for the specified element (child elements of the selected element) and specifies the function to run when these events occur. Event handlers that use the delegate () method apply to current or future elements, such as new elements created by the script.

How to use

$ (selector). Delegate (Childselector,event,data,function)

Childselector: Required items, elements that need to be added to an event handler, typically a selector child element;

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

Single Event Processing: for example $ (selector). Delegate (Childselector, "click", Data,function);

Multi-Event handling: 1. Use a space to separate multiple events, such as $ (selector). Delegate (Childselector, "Click Dbclick mouseout", data,function);

2. Use curly braces to define multiple events flexibly, such as $ (selector). Delegate (Childselector,{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;

Illustrate View Code

Available in jquery version

jquery1.4.2 and the above version;

On ()

Brief description

On () to the specified element, add one or more event handlers, and specify the functions to run when these events occur. An event handler that uses the On () method applies to current or future elements, such as new elements created by the script.

How to use

$ (selector). On (Event,childselector,data,function)

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

Single Event Processing: for example $ (selector). On ("click", Childselector,data,function);

Multi-Event handling: 1. Use a space to separate multiple events, such as $ (selector). On ("Click Dbclick mouseout", childseletor,data,function);

2. Use curly braces to define multiple events flexibly, such as $ (selector). On ({event1:function, event2:function, ...},childselector);

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;

Childselector: Optional; elements that need to be added to the event handler, typically the child elements of the selector;

Data: Optional; parameters to be passed;

function: required; functions that need to be executed when the binding event occurs;

Illustrate View Code

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 of four ways and their advantages and disadvantages

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 event settings for elements that already exist, but live (), on (), delegate () Support event settings for new additions to the future; The demo code is as follows:

 1  

The 2.bind () function was highly recommended before the jquery1.7 version, and after 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, again, you can

To replace the live () function, the live () 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 execution speed, flexibility, and CSS selector support, and if you want to know the specifics, stamp this:

http://kb.cnblogs.com/page/94469/


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