Event action decomposition for jQuery-related controls _ jquery

JQuery is a great JS class library with rich UI libraries and plug-ins. But I love his selector. I feel that other functions are sometimes far away from the background staff, so I usually only use his selector. Today, I suddenly became interested in his events. I have encountered these events before, but I have not sorted them out. I just want to get them out today.

For control events, jQuery has provided a wide range of methods, including binding, binding, and triggering. This morning, ara' can see how it can be used by daguo.

It is very convenient to bind events to jQuery, including bind, live, And one. It also helps you to separate some common events, such as The onclick event of the Control. When binding an onclick event, you only need

The Code is as follows:

$ ("# TestButton"). click (function (){
Alert ("I'm Test Button ");
});

In this way, The onclick event is bound to the testButton and the alert statement is executed. We can also use $ ("# testButton"). click (); to trigger this onclick event. Everything is very OK. The above is a bit sb. Next let's take a look at the cancellation event. JQuery has the unbind method, specifically used to cancel the binding, that is, to cancel the event. In the preceding example, you should use: $ ("# testButton "). unbind ("click"); well, it looks very good. If you have two click events, you can also use unbind ("click", fnName) to delete the binding of a specific function. Why is there a way to cancel a specific function? Let's take a look at the example below. We will find that javascript events are exactly the same as C # events. Event binding is a superposition (+ =) instead of overwriting.

The Code is as follows:

Var Eat = function (){
Alert ("I want to eat ");
}

Var PayMoney = function (){
Alert ("pay first ");
}

JQuery (document). ready (function (){
$ ("# TestButton"). click (Eat );
$ ("# TestButton"). bind ("click", PayMoney );
});

Through the above example, we found that "I want to eat" will pop up and "pay first" will pop up, indicating that it is bound through onclick + = fn. Let's modify the ready method:

The Code is as follows:

JQuery (document). ready (function (){
$ ("# TestButton"). click (Eat );
$ ("# TestButton"). unbind ();
$ ("# TestButton"). bind ("click", PayMoney );
});

Another error occurred. If you click the button this time, you will only execute PayMoney and Eat. If you put unbind () behind bind, this button will not work. But what if I want to remove the bound PayMoney method? In this case, we should write:

The Code is as follows:

JQuery (document). ready (function (){
$ ("# TestButton"). click (Eat );
$ ("# TestButton"). bind ("click", PayMoney );
$ ("# TestButton"). unbind ("click", PayMoney );
});

Hey, it's actually the same as bind, but next you will see a bug (I don't know if it's counted). Let's get a close-up experience.

The Code is as follows: