Four ways to introduce jquery binding events _jquery

jquery provides a variety of ways to bind events, each with its own characteristics, understanding the similarities and differences between them, and helping us to make the right choices when writing code to write elegant and easily maintainable code. Let's take a look at the ways in which you bind events in jquery.

jquery provides four types of event eavesdropping, namely bind, Live, delegate, on, and the corresponding unblocking functions are unbind, die, undelegate, off, respectively. Before we start to see them.

One: Bind (Type,[data],function (EventObject))

Bind is one of the more frequently used, which is to tie the listener function of a specific event type to the selected element, and the parameters will have the following meanings:

Type: Event types, such as click, change, mouseover, etc.;

Data: The parameters of the incoming listener function are fetched through the event.data. Optional;

Function: Listener functions, which can be passed in to event objects, where the event is a jquery-encapsulated event object that differs from the native event object and requires attention when used

Bind's Source code:

Bind:function (types, data, fn) {return
this.on (types, NULL, data, FN);
}
$ (' #myol li '). bind (' click ', gethtml);

The characteristic of BIND is to bind the listener to the target element, one to bind, and it is OK to use it when the elements on the page are not dynamically added. But if you add a "list element 5" to the list dynamically, clicking on it is unresponsive and you must bind again. To be less troublesome, we can use live.

jquery also has a shorthand for event binding such as A.click (function () {}), A.change (function () {}), and so on, they are just shorthand for the same purpose as bind.

Two: Live (type, [data], FN)

Live parameters and bind like, it has any strange, we still first glance at the source code:

Live:function (types, data, fn) {
jQuery (This.context). On (types, this.selector, data, FN);
return this;
}

You can see that the live method does not bind the listener to itself (this) but is bound to the this.context. What is this context? In fact, the scope of the element, read the following code is clear:

$ (' #myol li '). Context; Document
$ (' #myol Li ', ' #myol '). Context;//document
$ (' #myol Li ', $ (' #myol ') [0]);//ol

Normally, we don't use selectors like the third way, so we think the context is usually document, that is, the live method binds the listener to the document. Without the listener directly bound to the element, do you think of the event delegation mechanism? If not, you can click here to recall. Live is the use of event delegation mechanism to complete the incident monitoring processing, the node processing entrusted to the document. In the listener function, we can use Event.currenttarget to get to the node that is currently catching the event. The following examples reveal:

$ (' #myol Li '). Live (' click ', gethtml);

Three: Live there is such a disadvantage, so we think, since the Don burden so heavy, can not bind the listener to the document, binding on the nearest parent element is not good. Conform to the normal logic, delegate was born.

A selector is used to specify the target element that triggers the event, and the listener is bound to the element that calls this method. Look at the Source:

Delegate:function (selector, types, data, fn) {return
This.on (types, selector, data, FN);
}

is called on, and the selector is passed to on. It looks like this on is really something important. Just ignore it. Take a look at the example first:

$ (' #myol '). Delegate (' Li ', ' click ', gethtml);

See so much, you can't wait to see this on the true face of it, this comes:

On (TYPE,[SELECTOR],[DATA],FN)

The parameters are similar to the delegate, but there is a slight difference, first type and selector changed position, followed by selector into optional. The reason for the swap position is not easy to verify, it should be to make the visual more comfortable.

Let's not pass the selector to see an example:

$ (' #myol Li '). On (' click ', gethtml);

You can see that Event.currenttarget is Li himself, as the result of bind. As for the biography of selector, it is the same meaning as delegate, except that the order of the parameters is different, the other is exactly the same.

Finally see on the real role, then, so many event binding way, how do we choose?

In fact, the problem is completely unnecessary, because you already know the difference between them, is not it? According to the actual situation of the use of the line. However, one of the official recommendations is to use on as much as possible, because the other methods are internal call on to complete, directly using on can improve efficiency, and you can use on to replace the other three. As for how to replace me, I don't have to write it so plainly, and it's not easy to really understand the difference.

The above is a small set to introduce the jquery binding event four ways to introduce, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!