Analysis of the difference between bind () Live () delegate () in jquery

Analysis of the difference between bind () Live () delegate () in jquery

First of all, you need to understand the concept of our event bubbling (event propagation), I'll look at a picture

1.bind mode

     $ (' a '). bind (' click ',function  () {        alert (' click ');      })

Parsing: This is the simplest way, JQ scans the document to find all a, so that the function is bound to the click event of each element

2.live mode

     $ (' a '). Live (' Click ',function  () {        alert (' click ');      })

Parsing: JQ binds a function to the $ (document) element and uses click and a as a parameter, and whenever an event bubbles onto the document node, isolate

Whether it belongs to the Click event, and whether the target element of the event is a, whether the CSS selector matches

The live method can also be bound to specific elements (or "context") instead of dropping on the document

$ (' A ', $ (' #container ') [0]). Live (' Click ',function() {alert (' click ')})

While

The. Live () method can be valid for an element that has not yet been added to the DOM.

is due to the use of event delegates: event handlers that are bound on ancestor elements can respond to events that are triggered on descendants.

The event handler passed to. Live () is not bound to an element, but rather as a special event handler, bound to the root node of the DOM tree

   //after we add the div through JQ, add the event$ (document.body). Append (' <div class= "test" id= "btn" style= "Background:green;" >click</div> '); $("#btn"). Bind (' click ',function() {alert (' Click '); })     //results, normal operation;        //But if you define the event first, you want this order.$ ("#btn"). Bind (' click ',function() {alert (' Click '); }) $ (document.body). Append (' <div class= ' test "id=" btn "style=" Background:green; " >click</div> '); //result, no binding event, no popup click        //The workaround is to use: Live ()$ ("#btn"). Live (' click ',function() {alert (' Click '); }) //of course, if you put it in the back, the effect can be dripping$ (document.body). Append (' <div class= "test" id= "btn" style= "Background:green;" >click</div> '); //Live does not free space after the run, too much use will take up more memory, bind () and then after the click to free space

The Bind method can bind to any JavaScript event, while the live method supports only click, DblClick, KeyDown, Keypress,keyup,mousedown, jQuery1.3,

MouseMove, Mouseout, MouseOver, and MouseUp. In jquery 1.4.1, it even supports focus and blue events (mapping to more appropriate,

And can be bubbling on the Focusin and Focusout). In addition, hover (mapped to "Mouseenter,mouseleave") can also be supported in jquery 1.4.1.

(2) Live () does not fully support elements found through the DOM traversal method. Instead, you should always use the. Live () method directly behind a selector.

(3) When an element uses the live method to bind an event, if you want to prevent the event from passing or bubbling, return false in the function, just call

Stoppropagation () is unable to prevent the transmission or bubbling of events;

One of the big drawbacks of the ps:live approach is that it can only be manipulated against a direct CSS selector.

3.delegate

    $ (' #container '). Delegate (' A ', ' click ',function  () {        alert (' click ');    })

Parsing: The JQ scan document looks for $ ("#container") and binds the function to $ ("#container") using the Click event and a CSS picker as a parameter.

At any time, whenever an event bubbles to $ ("#container"), it finds whether the event is a click, and whether the target element of the event is associated with the CSS picker

The.

Analysis of the difference between bind () Live () delegate () in jquery