jquery three ways to bind events. Bind (),. Live (),. Delegate ()

The difference between. bind (),. Live (), and . Delegate () is not obvious. But understanding their differences helps to write more concise code and prevents unexpected bugsin our interactive programs.

Basis

DOM Tree

First, a graphical HTML document can help us understand better. A simple HTML page should look like this

Event bubbling (also known as event delivery) (Eventsbubbling aka Event Propagation)

Clicking a link triggers the Click event bound to the link element , which in turn triggers the function that binds to the click Event of the element.

1	$ (' a '). bind (' click ', function () {alert ("that Tickles!")});

　　

So a single click triggers an alert.

The Click Event is then passed up from the DOM tree, propagated to the parent element, and then passed to each ancestor element.

In the DOM tree, document is the root node.
Now we can easily explain the difference between bind (),. Live (), and . Delegate ()

. Bind ()

1	$ (' a '). bind (' click ', function () {alert ("that Tickles!")});

　　

This is the most straightforward method of binding. JQuery Scan documents to find all $ (' a ') element, and then give each of the elements found Click The event binding handler function.

. Live ()

1	$ (' a '). Live (' click ', function () {alert ("that Tickles!")});

　　

jquery bind handler function to   $ (document)   element, and put   and   as a function parameter. There are events bubbling to document node, check that this event is not   event, Span style= "Font-family:verdana;" >target element can match   ' a '  css selector If two conditions are true , handling function execution.

The live method can also be bound to the specified element (or " context ") without binding to the document. For example:

1	$ (' A ', $ (' #container ') [0]). Live (...);

　　

. Delegate ()

1	$ (' #container '). Delegate (' A ', ' click ', function () {alert ("that Tickles!")});

　　

Jquery scan document find   $ (' #container ') click  event, ' a '  css selector as the parameter of the function. When there is an event bubbling to  , and check the target element is not a match css selector, if both are compliant, execute the function.

Note that this time is very similar to the . Live () method, except that the event is bound to a specific element and differs from the element. The savvy JS ' er may be summed up into $ (' a '). Live () = = $ (document). Delegate (' a '), is that really the case? No, not all of it.

Why . Delegate () ratio . Live () good

the delegate method of jQuery should be preferred more than the Live method for a reason. Consider the following scenario:

1 2 3

$ (' a '). Live (' click ', function () {blah ()}); Or $ (document). Delegate (' A ', ' click ', function () {blah ()});

　　

Speed

The second above executes faster than the first because the first one will traverse the entire document to find the $ (' a ') element and save it as a jQuery object, but the live Method only needs to pass a string parameter ' a ' , the$ () method does not know that we will use the chain expression in the back . Live ().

The delegate method only needs to find and store the $ (document) element enough.

One of the hack is to call the live method outside of the $ (document). Ready () , so that it executes immediately. at this point the DOM is not populated, and no elements are found or jQuery objects are created.

Flexibility and chained syntax

The live approach is still confusing. Think about it chained to the $ (' a ') object, but actually it works in the $ (document) object. For this reason, using live in chained expressions is disturbing, and I think the live approach becomes a global jQuery approach $.live (' a ',...) will make more sense.

Only CSS selectors are supported

Finally, thelive method has one of the biggest drawbacks, only with CSS selectors, it is inconvenient to use.

For The disadvantages of CSS selectors, see exploring JQuery. Live () and. Die ().

Original Author update

Why use . Live () or . Delegate ( ) instead of . bind ()

Finally, BIND  DELEGATE  or   live:

• Binds an event handler to an element that does not yet exist in the DOM. the bind method binds the function directly to each individual element and cannot be bound to an element that has not yet been added to the page if you write $ (' a '). Bind (...) , and then use Ajax a new link has been added to the page, and the newly Added link will not bind the event. Live or delegate or other events that are bound to ancestor elements, so that existing elements, or elements that are added later, can be used.
• The binding handler functions to an element or a few elements, listening to the descendant elements, rather than binding the same processing function to a separate element. This is more of a performance advantage.

Stop bubbling

Finally, notice the event bubbling. Usually we can block other processing functions in such a way:

1 2 3 4 5

$ (' a '). bind (' click ', function () { E.preventdefault (); Or E.stoppropagation (); })

　　

But here, events bound with the live or delegate methods are passed to the point where the event is actually bound. At this point the other functions have been executed.

jquery three ways to bind events. Bind (),. Live (),. Delegate ()