How many ways are there to bind events in jquery?

There are 4 ways to bind events in jquery, namely: bind(), live(), delegate() and on() methods; the bind() method can only handle events for existing elements. Binding, and live(), on(), and delegate() all support event binding for newly added elements in the future.

The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.

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

The difference between these methods:

1. The bind() function can only set events for existing elements; but live(), Both on() and delegate() support event settings for newly added elements in the future;

2. The bind() function was relatively popular before jquery version 1.7. After the release of version 1.7, the official use of bind is no longer recommended. (), the replacement function is on(), which is also a newly added function in version 1.7. Similarly, it can be used to replace the live() function. The live() function has been deleted in version 1.9; [Related recommendation: "jQuery Video Tutorial》]

3. The live() function and the delegate() function are similar, but the live() function is worse than delegate() in terms of execution speed, flexibility and CSS selector support.

4. bind() supports all versions of Jquery; live() supports jquery1.9-; delegate() supports jquery1.4.2; on() supports jquery1.7;

The following introduces these methods in detail:

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

Bind is used more frequently The higher one 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 parameters passed into the listening function are 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

bind Source code:

  bind: function( types, data, fn ) {

  return this.on( types, null, data, fn );

  }

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

The characteristic of bind is that it will bind the listener to the target element, one to 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. To avoid this trouble, we can use live.

jQuery also has a shorthand way of event binding, such as a.click(function(){});, a.change(function(){});, etc. Their functions are the same as bind, but It's just an abbreviation.

2. live(type, [data], fn)

The parameters of live are the same as bind. What’s weird about 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 that the live method does not bind the listener to itself (this), but to this.context. What is this context? In fact, it is the limited range of the element. It will be clear after reading the following code:

$('#myol li').context; //document

$('#myol li','#myol').context; //document

$('#myol li',$('#myol')[0]); //ol

Normally, we do not use selectors like the third method, so we also It is considered that this context is usually the document, that is, the live method binds the listener to the document. Without binding the listener directly to the element, have you remembered the event delegation mechanism? If not, you can click here to recall it. Live uses the event delegation mechanism to complete event monitoring and processing, and delegates node processing to document. In the listening function, we can use event.currentTarget to obtain the node currently capturing the event. The following example will reveal:

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

3. Delegate and on

live have such shortcomings, so we thought, since the old man’s burden is so heavy, can we not If you bind the listener to the document, wouldn't it be better to bind it to the nearest parent element? Following normal logic, delegate was born.

The parameter has an additional selector, which is used to specify the target element that triggers the event. The listener will be bound to the element that calls this method. Look at the source code:

delegate: function( selector, types, data, fn ) {

return this.on( types, selector, data, fn );

}

calls on again and passes the selector to on. It seems that this on is really important. Just ignore it for now. Let’s take a look at the example first:

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

After reading so much, are you eager to see the true face of this on? Here comes it:

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

The parameters are similar to those of delegate but there are still some The subtle difference is that first, type and selector have changed their positions, and second, selector has become optional. The reason for switching positions is difficult to verify, but it should be to make it more visually comfortable.

Let’s look at an example without passing the selector:

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

You can see that 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.

Finally we see the true role of on. So, with so many event binding methods, how should we choose?

In fact, there is no need to worry about this issue at all, because you already know the difference between them, right? Just use it according to the actual situation. However, an official recommendation is to use on as much as possible, because other methods are completed by calling on internally. Using on directly can improve efficiency, and you can use on to replace the other three writing methods. As for how to replace them, I think there is no need to write them out so straightforwardly. After truly understanding their differences, it will naturally not be difficult.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of How many ways are there to bind events in jquery?. For more information, please follow other related articles on the PHP Chinese website!