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

Recently in the study of JS, small brother once again see the jquery in several common methods of binding events:bind (), Live (), delegate (). Therefore, idle to do nothing, want to put them a few to do a systematic analysis, once again the yards farmers can share!

First of all, I also count JS beginners, very complex module what, but also slightly understand, if you have the code god See, do not Ma i ha!!

Well, the following will be directly into the theme ~

First, introduce these three methods separately:

1,bind ()--$ (selector). Bind (Event,data, function);

Event is required to specify one or more events that are added to the element, separate multiple events by a space, and must be valid events

Data optional, which specifies that additional data passed to the function is not normally used

function is required to specify functions that run when an event occurs.

Instance:

$ ("button"). Bind ("click", Function () {

$ ("P"), Slidetoggle ();//slidetoggle () method is mouse click to toggle

})

You can also add multiple events to the same element:$ (selector). bind (Event:function,event:function,....);

$ (document). Ready (function () {

$ ("button"). Bind (Click:function () {

$ ("P"). Slidetoggle ();

},

Mouseover:function () {

$ ("Body"). CSS ({' Background ', ' red ';})

},

Mouseout:function () {

$ ("Body"). CSS (' background ', ' #fff ');

});

});

2, Live ()--$ (selector). Live (event,data,function);

Event is required to specify one or more events that are added to the element, separate multiple events by a space, and must be valid events

Data optional, which specifies that additional data passed to the function is not normally used

function is required to specify functions that run when an event occurs.

Instance:

$ ("button"). Live ("Click", Function () {

$ ("P"). Slidetoggle ();

})

One advantage of the live () method is that you can add an event to a new element that is temporarily created by the JS script.

3, delegate ()--$ (selector). Delegate (childselector,event,data,function);

Childselector required to specify one or more child elements to attach the event handler.

Event required, which specifies one or more events attached to the element.

Multiple event values are separated by spaces and must be valid events.

Data optional, which specifies additional data to be passed to the function.

function is required to specify functions that run when an event occurs.

The delegate () method can also be used to add an event to an HTML that does not already exist (that is, a new element created temporarily by the JS script).

Instance:

$ (' div '). Delegate (' button ', ' click ', function () {

$ ("P"). Slidetoggle ();

})

Here's a look at their similarities and differences:

First of all, simply looking at the event binding for an element, they seem to have little difference between them, can implement simple event binding, and they are followed by event bubbling (event propagation) to query the element to bind the event.

However, the bind () method does not add event bindings for the future (that is, elements that are newly generated and created by the JS script), as in the Live () and delegate () methods. The bind () method can only add binding events to elements that already exist in the HTML.

One of the biggest drawbacks of the live () method is that it can only operate on a direct CSS selector, which makes it very inflexible.

The only difference between live () and delegate () is that they differ in the acquisition speed of the element to which the event is bound. In the event of transmission, the latter is faster than the former, only because the latter constraints more accurate. This can be seen from the structure of their binding events.

In view of the above analysis, we prefer the live () and delegate () methods. And the two, there are tendencies with the latter.

However, the bind () method is efficient and straightforward for stopping event propagation. Therefore, the bind () method is chosen when we are usually used to prevent event propagation:

$ (' a '). bind (' click ', Function (e) {

E.preventdefault ();

E.stoppropagation ();

});

The time is delayed only by the other two methods because of the event bubbling.

This article is from the "focus on Technology focus Front" blog, be sure to keep this source http://oxoxo.blog.51cto.com/9301862/1597328

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