Introduction to Four Ways of Binding Events with jQuery

jQuery provides various ways to bind events, each with its own characteristics. Understanding the similarities and differences between them helps us make the correct choice when writing code, thereby writing elegant and easy-to-maintain code. Let's take a look at the ways to bind events in jQuery.

jQuery provides four ways of event listening, which are bind, live, delegate, and on. The corresponding functions to remove the listening are unbind, die, undelegate, and off. Before we start looking at them,

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

'bind' is a frequently used method, which binds a specific event type listener to the selected element. The meaning of the parameters is as follows:

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

data: The parameters passed to the listening function, which can be retrieved through event.data. Optional;

function: The listening function, which can pass the event object. Here, the event is the jQuery-wrapped event object, which is different from the original event object. Pay attention to it when using it.

Source code of 'bind':

bind: function(types, data, fn) {
return this.on(types, null, data, fn);
}
$('#myol li').bind('click', getHtml);

The characteristic of 'bind' is that it binds the listener to the target element, one by one. It's fine to use it when there are no dynamic additions of elements on the page. But if a 'list element' is dynamically added to the list,5Clicking it has no response, and you must bind it again. To avoid this trouble, we can use 'live'.

jQuery also provides a shorthand way for event binding, such as a.click(function(){});, a.change(function(){});, etc., which serve the same purpose as 'bind', but are just a shorthand.

Two: live(type, [data], fn)

The parameter of 'live' is similar to 'bind', but what's the trick here? 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;
}

As can be seen, the 'live' method does not bind the listener to itself (this), but to this.context. What is this.context?63;That is actually the limited range of the element, and it will be clear after looking at the following code:

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

In most cases, we will not use the selector as the third method, so we think that this 'context' is usually the document, that is, the 'live' method binds the listener to the document. Don't you remember the event delegation mechanism when you don't bind the listener directly to the element?63;If not, you can click here to recall. 'live' uses the event delegation mechanism to complete the event listening and handling, delegating the node handling to the document. In the listening function, we can use event.currentTarget to get the current captured node. The following example will reveal:

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

Three: 'live' has such shortcomings, so we thought, since the old man is so burdened, why not bind the listener to the document? Isn't it better to bind it to the nearest parent element? Following the normal logic, 'delegate' was born.

One more parameter is added, 'selector', which is used to specify the target element that triggers the event, and the listener will be bound to the element that calls this method. Let's look at the source code:

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

It calls 'on' again and passes the 'selector' to 'on'. It seems that 'on' is indeed a crucial element. Let's not worry about it for the moment. Let's look at the example first:

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

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

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

The parameters are similar to delegate but still have subtle differences. First, the type and selector are swapped, and second, the selector becomes an option. The reason for the swap is not easy to verify, and it should be to make the visual appearance more comfortable.

Let's not pass the selector and look at an example:

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

As can be seen, event.currentTarget is li itself, which is the same as the effect of bind. As for passing selector in, it is the same as the meaning of delegate, except for the difference in parameter order, everything else is the same.

Finally, we see the real effect of on, so, with so many event binding methods, how should we make a choice?63

In fact, this problem is not necessary to worry about, because you already know the differences between them, don't you?63According to the actual situation, use it with discretion. However, there is an official recommendation to use on as much as possible, because other methods are completed internally by calling on, which can improve efficiency, and you can completely use on to replace the other three writing methods. As to how to replace it, I think it is not necessary to write it so directly. After truly understanding the differences between them, it will naturally not be a difficult thing.

The above-mentioned are the four ways of jQuery event binding introduced by the editor, hoping it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. At the same time, I also want to express my sincere gratitude to everyone for supporting the Yell Tutorial website!

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w.3Please report any copyright infringement by sending an email to codebox.com (replace # with @ when sending email), and provide relevant evidence. Once verified, this site will immediately delete the suspected infringing content.