Home > Developer > JavaScript
Details about bind (), live (), delegate (), on () binding event Method instances in jQuery, and jquerydelegate
This document analyzes bind (), live (), delegate (), and on () event binding methods in jQuery. We will share this with you for your reference. The details are as follows:
Preface
Because jquery is often used in projects to perform addition, deletion, and deletion of dom elements, the binding event Method of dom elements is involved. The differences between bind, live, delegate, and on are briefly summarized, I hope this article will help you later. If there are any mistakes in this article, I hope you can correct them. If you don't talk much about it, go to the topic.
I. bind ()
Brief Description
Bind () adds one or more event processors to the matching element.
Usage
Copy codeThe Code is as follows: $ (selector). bind (event, data, function)
Event: required. One or more events added to an element, such as click and dblclick;
Single Event Processing: for exampleCopy codeThe Code is as follows: $ (selector). bind ("click", data, function );
Multi-event processing: 1. Separate multiple events with spaces, for exampleCopy codeThe Code is as follows: $ (selector). bind ("click dbclick mouseout", data, function );
2. Use braces to flexibly define multiple events, suchCopy codeThe Code is as follows: $ (selector). bind ({event1: function, event2: function ,...})
3. Space separation: binding is rigid and cannot bind functions to events separately. It is suitable for handling multiple events and calling the same function;
Alternative to braces: binding is flexible and functions can be bound to events separately;
Data: Optional. parameters to be passed;
Function: required. The function to be executed when a binding event occurs;
Example
<Html xmlns = "http://www.w3.org/1999/xhtml">Applicable to Jquery
Applicable to All versions, but the bind () function is recommended to be replaced by on () Since jquery1.7.
Ii. live ()
Brief Description
Live () adds one or more event processors to the current or future matching elements;
Usage
Copy codeThe Code is as follows: $ (selector). live (event, data, function)
Event: required. One or more events added to an element, such as click and dblclick;Single Event Processing: for exampleCopy codeThe Code is as follows: $ (selector). live ("click", data, function );
Multi-event processing: 1. Separate multiple events with spaces, for exampleCopy codeThe Code is as follows: $ (selector). live ("click dbclick mouseout", data, function );
2. Use braces to flexibly define multiple events, suchCopy codeThe Code is as follows: $ (selector). live ({event1: function, event2: function ,...})
3. Space separation: binding is rigid and cannot bind functions to events separately. It is suitable for handling multiple events and calling the same function;Alternative to braces: binding is flexible and functions can be bound to events separately;
Data: Optional. parameters to be passed;
Function: required. The function to be executed when a binding event occurs;Example
<Html xmlns = "http://www.w3.org/1999/xhtml">Applicable to Jquery
Jquery1.9 and later versions are supported. jquery1.9 and later versions Delete this method. jquery1.9 and later versions are replaced by the on () method.
3. 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. The event handler using the delegate () method applies to current or future elements (such as new elements created by scripts ).
Usage
Copy codeThe Code is as follows: $ (selector). delegate (childSelector, event, data, function)
ChildSelector: required. The element of the event handler, which is generally a child element of selector;
Event: required. One or more events added to an element, such as click and dblclick;Single Event Processing: for exampleCopy codeThe Code is as follows: $ (selector). delegate (childselector, "click", data, function );
Multi-event processing: 1. Separate multiple events with spaces, for exampleCopy codeThe Code is as follows: $ (selector). delegate (childselector, "click dbclick mouseout", data, function );
2. Use braces to flexibly define multiple events, suchCopy codeThe Code is as follows: $ (selector). delegate (childselector, {event1: function, event2: function ,...})
3. Space separation: binding is rigid and cannot bind functions to events separately. It is suitable for handling multiple events and calling the same function;Alternative to braces: binding is flexible and functions can be bound to events separately;
Data: Optional. parameters to be passed;
Function: required. The function to be executed when a binding event occurs;Example
<Html xmlns = "http://www.w3.org/1999/xhtml">Applicable to Jquery
Jquery1.4.2 and later versions;
Iv. on ()
Brief Description
On () is the specified element. It adds one or more event handlers and specifies the functions that run when these events occur. The event handler using the on () method applies to current or future elements (such as new elements created by the script ).
Usage
Copy codeThe Code is as follows: $ (selector). on (event, childselector, data, function)
Event: required. One or more events added to an element, such as click and dblclick;Single Event Processing: for exampleCopy codeThe Code is as follows: $ (selector). on ("click", childselector, data, function );
Multi-event processing: 1. Separate multiple events with spaces, for exampleCopy codeThe Code is as follows: $ (selector). on ("click dbclick mouseout", childseletor, data, function );
2. Use braces to flexibly define multiple events, suchCopy codeThe Code is as follows: $ (selector). on ({event1: function, event2: function,...}, childselector );
3. Space separation: binding is rigid and cannot bind functions to events separately. It is suitable for handling multiple events and calling the same function;Alternative to braces: binding is flexible and functions can be bound to events separately;
ChildSelector: (optional) element of the event handler, which is generally a child element of selector;
Data: Optional. parameters to be passed;
Function: required. The function to be executed when a binding event occurs;Example
<Html xmlns = "http://www.w3.org/1999/xhtml">Applicable to Jquery
Jquery1.7 and later versions. jquery1.7 is used to replace the bind () and live () event binding methods;
Differences and advantages and disadvantages of the four methods
Similarities:
1. All events of a single element and multiple events can be bound. The space is separated or the braces are replaced;
2. All events are passed to the document for event response through event bubbling;Comparison and contact:
1. the bind () function can only set events for existing elements. However, live (), on (), and delegate () support setting events for new elements in the future. The Demo code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">2. the bind () function was well-respected before jquery1.7. After jquery1.7 was released, it was not officially recommended to use bind () instead of on (), this is also a new function added in version 1.7. It can also be used to replace the live () function. The live () function has been deleted in version 1.9;
3. the live () function is similar to the delegate () function, but the execution speed, flexibility, and CSS selector support of the live () function is lower than that of delegate (). For details, please refer. bind (),. live () and. difference Analysis Between delegate ()
4. bind () supports all Jquery versions; live () supports jquery1.8-; delegate () supports jquery1.4.2 +; on () supports jquery1.7 +;
Vi. Summary
If the referenced jquery version in the project is a lower version, we recommend using delegate (). Later jquery versions can be replaced by on (). The above is only my opinion. If you have different ideas, welcome to the discussion.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
