Differences between BIND (), live (), and delegate () event methods in JQ

[Guide]The differences between BIND (), live (), and delegate () methods are not very obvious. Figuring out these differences is very helpful for writing the summary code and preventing the emergence of bugs in our applications. The jquery team released a new method called

The differences between the BIND (),. Live (), and. Delegate () methods are not very obvious. Figuring out these differences is very helpful for writing the summary code and preventing the emergence of bugs in our applications.

In version 1.7, The jquery team released a new method for binding events called on. This method includes the functions of live, bind, and delegate described below, allowing us to specify the method of binding events by passing different parameters rather than using different method names.

Basic knowledge
 
Definition and usage

The BIND () method adds one or more event handlers to the selected element and specifies the function that runs when an event occurs.

Bind events and functions to elements
Specifies one or more Event Handlers added to the selected element and the functions that run when an event occurs.

Syntax

$ (Selector). BIND (event, Data, function)

Example

$ ("Button"). BIND ("click", function (){
$ ("P"). slidetoggle ();
});

The live () method attaches one or more event handlers to the selected elements and specifies the functions that run when these events occur.

The event handler appended with the live () method applies to matching the current and future elements of the selector (such as new elements created by the script ).

Syntax
$ (Selector). Live (event, Data, function)

Example

$ ("Button"). Live ("click", function (){
$ ("P"). slidetoggle ();
});

•. Delegate (selector, eventtype, Handler)
Selector selector string used to filter the elements that trigger events.

Eventtype is a string that contains one or more JavaScript event types, such as "click" or "keydown," or a Custom Event name.

The function that handler executes whenever an event is triggered.

•. Delegate (selector, eventtype, eventdata, Handler)
Selector selector string used to filter elements that trigger events.

Eventtype is a string that contains one or more JavaScript event types, such as "click" or "keydown," or a Custom Event name.

 

Event bubbling (event transfer)

When we click a link, the link element will issue a click event, which will trigger the methods bound to the Click Event of the element.

$ ('A'). BIND ('click', function () {alert ("That tickles! ")}); As shown in the preceding code, an alert is triggered when the link is clicked.

 
Click events broadcast to the parent element along the tree. events triggered on all child elements are passed up the tree until the root element.
 

In Dom operations of HTML, document is a heel node.

Next we will look at the differences between. BIND (),. Live (), and. Delegate.

. BIND ()

$ ('A'). BIND ('click', function () {alert ("That tickles! ")}); This is the most direct way to bind events. Jquery traverses all the $ ('A') elements in the document and binds the click event of each element to the alert method.

. Live ()

$ ('A'). Live ('click', function () {alert ("That tickles! ")}); Jquery binds the alert Method to the $ (document) element and uses 'click' and 'A' as parameters. When an event is transmitted to the document node, the node checks whether the event type is click and whether the event's target element type matches the selection Letter 'A. If the test passes, execute the alert method.

In addition to the document, the live method can also bind the method to the specified element, as follows:

The Code is as follows:	Copy code
$ ('A', $ ('# iner') [0]). Live (...);. Delegate ()

$ ('# Iner'). Delegate ('A', 'click', function () {alert ("That tickles! ")}); Jquery traverses the document to retrieve the $ ('# iner') element, binds the alert method, and uses the Click Event and 'A' selector as parameters. When an event is passed to $ ('# iner'), it checks whether the event type is click and whether the target element matches the 'A' selector. If the verification is passed, the method is executed.

Note that this method is the same. live () is somewhat similar. Their difference is that. the delegate () method binds a method to a specific element. live () is bound to the document root element. Maybe we will ask if $ ('A'). Live () = $ (document). Delegate ('A ')?? The answer is not exactly the same.

Why. Delegate () is more recommended than. Live ()

Jquery's delegate method has the following advantages over the live method.

The Code is as follows:	Copy code
$ ('A '). live ('click', function () {blah ()}); // or $ (document ). delegate ('A', 'click', function () {blah ()});

Speed

The effect of the above two methods for binding events is the same. However, the second method is faster than the first method. Because the first method needs to retrieve all $ ('A') elements from the document node and save these elements as jquery objects. Although the live method only needs to use the passed identifier 'A' to verify which events need to be processed, the $ () method does not know that the method followed by it is. Live ().

The delegate method only finds and saves the $ (document) element.

Flexibility and code continuity

Live is more complex than live. Although it is connected to the $ ('A') object, it actually works on the $ (document) object. For this reason, it is difficult to understand the method followed by it. In practical applications, we recommend that you use $. Live ('A ',...) To bind to a specified element.

Only CSS separators can be used.

The biggest disadvantage of the live method is that it can only be operated directly using the CSS selector, which makes this method very inflexible in use.

For more information about the disadvantages of CSS selection, see using ing jquery. Live () and. Die ().

Why is it recommended to use. Live () or. Delegate () instead of. BIND ()

From the above, it seems that the bind method is clearer and more direct, but considering the following two points, we prefer to use the live and delegate methods:

• Bind an event method to a nonexistent Dom element. Because bind directly binds a method to an independent element, it cannot bind the method to an element that does not exist on the page. Therefore, if we execute $ ('A'). BIND (...), Links added to the page after Ajax are not bound. The live and delegate Methods bind the event method to a specified parent node, so that the existing elements under the node or the events of the added elements can be processed.
• Listen to all their child elements by binding individual elements or a group of elements, instead of binding the same method to each independent Dom element through loops. Binding a method to one or more parent elements is much more efficient than binding a method directly to each element on the page.
Terminate event Transfer

Finally, we need to remind you about the termination of event transmission. Generally, we can terminate the event transmission to avoid running other event processing methods:

The Code is as follows:	Copy code
$ ('A'). BIND ('click', function (e) {e. preventdefault (); // or E. stoppropagation ();});

However, when we use the live or delegte method, the event processing method will not really run until the event is passed to the bound element. the BIND () Bound event method has actually run.