Bind in jquery (), Live (), delegate (), on () binding event mode preface

Source: Internet
Author: User

Objective

Because the project often has the use of jquery operations DOM element additions and deletions, it will involve the DOM elements of the binding event mode, a simple induction of the difference between the Bind,live,delegate,on, in order to consult later, but also hope that the article can help the park friends, If there are inappropriate in the text, but also hope that you correct, words do not say more directly into the subject.

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, etc.;

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

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

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

Examples Show

 1 

For jquery versions

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

Live ()

Brief description

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

How to use

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

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

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

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

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

Examples Show

 1 

For jquery versions

jquery1.9 version below support,jquery1.9 and above version removed this method,jquery1.9 above version with on () method instead.

Delegate ()

Brief description

  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;

Examples Show

 1 

For jquery versions

Jque ry1.4.2 and the above version;

On ()

Brief description

  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.

How to use

$ (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;

Examples Show

 1 

For jquery versions

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

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

Same point:

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

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

Compare and Contact:

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

 1 

2.bind () function in the jquery1.7 version before the comparison is respected, after the 1.7 version, the official has not recommended 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 than delegate () in terms of execution speed, flexibility, and CSS selector support, and you want to know the specifics, poke this:

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

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

Bind in jquery (), Live (), delegate (), on () binding event mode preface

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.