A brief talk on Bind (), Live (), delegate (), on () binding event mode in jquery

First, On (), Live (), bind ()

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

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

　　bind () adds one or more event handlers to the matching element. ( cannot be used for elements that do not currently exist )

Mode of use (three are the same)

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

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

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

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

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

3. Space Separation Method: Binding is more rigid, can not give the event of a separate binding function, suitable for handling multiple events call the same function;

Brace substitution: The binding is more flexible and can be used to bind functions individually;

　　childselector: Optional; an element that needs to add an event handler, typically a selector child element;

data: optional; parameters to be passed;

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

　　for jquery versions : jquery1.7 and above; jquery1.7 version is used to replace bind (), Live () bind event mode;

Second, delegate ()

　　delegate () adds one or more event handlers for the specified element (the child element 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 a script.

How to use

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

　　childselector: required items, elements that need to be added to the event handler, typically selector ;

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

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

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

2. Use braces to flexibly define multiple events, such as $ (selector). Delegate (Childselector,{event1:function, Event2:function, ...})　

3. Space Separation Method: Binding is more rigid, can not give the event of a separate binding function, suitable for handling multiple events call the same function;

Brace substitution: The binding is more flexible and can be used to bind functions individually;

data: optional; parameters to be passed;

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

　　For jquery version :jquery1.4.2 and above

Three or four different ways

Same point:

1. Supports single-element multi-event binding, space-separated or curly-brace substitution;

2. All events are passed through event bubbling to the document for the response of the event;

< Span style= "font-size:15px" > < Span style= "font-size:18px" >   Compare and contact:

1. Thebind () function can only set events for elements that already exist , but live (), on (), delegate () Support event settings for new additions in the future;

2.bind () function before the jquery1.7 version is respected, after the 1.7 version, the official has not recommended bind (), the substitution function is on (), this is also the 1.7 new function added, also can be used instead of 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.

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

A brief talk on Bind (), Live (), delegate (), on () binding event mode in jquery