JQuery binds events in four ways, and jquery binds events in four ways.

JQuery binds events in four ways, and jquery binds events in four ways.

JQuery provides multiple ways to bind events. Each method has its own characteristics. It understands the similarities and differences between them and helps us make the right choices when writing code, this allows you to write elegant and easy-to-maintain code. Next, let's take a look at how events are bound to jQuery.

JQuery provides four event listening Methods: bind, live, delegate, and on, and the corresponding functions for unbind, die, undelegate, and off. Before you start watching them

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

Bind is a frequently used listener. It binds a listener function of a specific event type to the selected element. The parameter meanings are as follows:

Type: event type, such as click, change, and mouseover;

Data: input parameters of the listener function, which are obtained through event. data. Optional;

Function: Listener function, which can be passed in the event object. The event here is the event object encapsulated by jQuery, which is different from the native event object. Pay attention to this when using this function.

 

Bind source code:

1234567

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

 

 

The feature of the bind is that the listener is bound to one of the target elements. It is okay to use the listener when the elements on the page are not dynamically added. However, if "list element 5" is dynamically added to the List, clicking it does not respond. You must bind it again. To avoid this problem, we can use live.

JQuery also has an abbreviated Method for event binding, such as. click (function () {});,. change (function () {}); and so on. They are used in the same way as bind.

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

What is the difference between the live parameter and the bind parameter? Let's take a look at the source code first:

1234567

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

 

 

We can see that the live method does not bind the listener to itself (this), but is bound to this. context. What is this context? In fact, it is the limited scope of the element. After reading the following code, we will be clear:

12345

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

Generally, we do not use the selector as in the third method, so we think that the context is usually a document, that is, the live method binds the listener to the document. Don't bind listeners directly to elements. do you think of the event delegation mechanism? If not, click here to recall. Live uses the event Delegate mechanism to handle event listening and delegates node processing to document. In the listener function, we can use event. currentTarget to obtain the node of the currently captured event. The following example is shown:

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

 

3: live has such shortcomings, So let's think about it. Since the burden on the old man is so heavy, can we not bind the listener to the document, it's not good to bind it to the nearest parent element. According to the normal logic, delegate was born.

The selector parameter is used to specify the target element of the event to be triggered. The Listener is bound to the element that calls this method. Look at the source code:

12345

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

 

 

On is called again, and selector is passed to on. It seems that this on is really important. Leave it alone. Take a look at the example first:

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

 

After reading so much, can you wait to see the true face of this on:

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

 

The parameters are similar to delegate, but there are still slight differences. First, the type and selector are changed to positions, and then the selector is changed to optional. The reason for switching locations is hard to verify. It should be to make it more visually comfortable.

Let's skip selector to see an example:

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

 

We can see that event. currentTarget is li, which is the same as bind. As for how to pass selector in, it means the same meaning as delegate, except that the parameter order is different.

Finally, we can see the real role of on. How can we choose so many event binding methods?

In fact, you don't have to worry about this problem, because you already know the difference between them, do you? Use it as needed. However, the official recommendation is to use on as much as possible, because other methods are completed by calling on internally. Using on directly improves efficiency, and you can use on instead of the other three methods. As for how to replace my mind, I don't have to write it out in such a straightforward way. It is naturally not difficult to understand the differences between them.