Detailed explanation of the methods and differences between bind and live as well as delegate and on binding events in jQuery

jQuery provides four event monitoring methods, namely bind, live, delegate, on, and the corresponding unlistening functions are unbind, die, undelegate, off .

It is known that there are 4 list elements:

List element 1

List element 2

List element 3

List element 4

　1. bind

bind(type,[data],function(eventObject))

bind is a more frequently used type. Its function is to bind a listening function of a specific event type to the selected element. The meaning of the parameters is as follows:

type: event type, such as click, change, mouseover, etc.;

data: the parameter passed in to the listening function, obtained through event.data. Optional;

function: Listening function, you can pass in the event object. The event here is the event object encapsulated by jQuery, which is different from the native event object. You need to pay attention when using it.

Source code:

bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
}

You can see that the on method is called internally.

The characteristic of bind is that it will bind the listener to the target element, one by one. There is no problem in using it when the elements on the page will not be added dynamically. But if a "list element 5" is dynamically added to the list, there will be no response when clicking on it, and you must bind it again.

2. The parameters of live

live(type, [data], fn)

live are the same as bind, so what’s wrong with it? Let’s take a look at the source code first:

live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}

You can see The live method does not bind the listener to itself (this), but to this.context.

live uses the event delegation mechanism to complete the monitoring and processing of events, and delegates the processing of nodes to document.

The advantages of using event delegation are clear at a glance. Newly added elements do not need to bind listeners again.

　3. delegate

Bind the listening event to the nearest parent element, source code:

delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}

Now, our choice has more flexibility, Not only can you use event delegation, you can also choose the object of delegation. After all, it's not good to bother the same person all the time. You still need a certain strategy on how to choose the delegate object. After all, there can be many parent elements. I think the principle should be to select the nearest "stable" element. The reason for selecting the nearest element is that events can bubble up faster and can be processed as soon as possible. The so-called "stable" means that the parent element is on the page from the beginning, not added dynamically, and will not disappear in the future. This ensures that it can monitor its children at all times.

　4. The on

on(type,[selector],[data],fn)

parameters are similar to those of delegate, but there are still slight differences. First, type and selector have changed their positions, and secondly, selector has become optional.

$('#myol li').on('click',getHtml);

You can see event.currentTarget is li itself, which has the same effect as bind. As for passing the selector in, it has the same meaning as the delegate. Except for the different order of parameters, everything else is exactly the same.

The above is the detailed content of Detailed explanation of the methods and differences between bind and live as well as delegate and on binding events in jQuery. For more information, please follow other related articles on the PHP Chinese website!