About bind in jquery (), on () binding event Method Summary _jquery

I. Bind ()

Use mode: $ (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;

Example:

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.

Two. 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 Processing:

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;

Available in jquery version

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

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 new additions to the future; Demo code

As follows:

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:

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

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.

The above is a small series for everyone on the jquery bind (), on () binding event way to sum up all the content, I hope that we support cloud Habitat Community ~