Decomposition of event operations of jQuery related controls_jquery

I suddenly became interested in his incident today. I have come across it before and haven’t sorted it out yet. I’ll do it when I have time today.

For control events, jQuery has provided a wealth of methods, including binding, one-time binding, triggering, etc. Let’s see if it can be used this morning. Prawn Lugu will do the trick. .

jQuery’s binding events are very convenient. There are bind, live, one and it can help you isolate some commonly used events, such as the onclick event of the control. When we bind the onclick event, we only need

Copy code The code is as follows:

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

In this way, we bind the onclick event to the testButton button and execute the alert statement. We can also use $("#testButton").click(); to trigger this onclick event, and everything is fine. The above is a bit sloppy, let’s look at the cancellation event next. jQuery has an unbind method, which is specifically used to unbind, that is, cancel events. According to the above example, you should use: $("#testButton").unbind("click"); Well, it looks very good. If If your click event has two events, you can also use unbind("click", fnName) to delete the binding of a specific function. Why is there this method of canceling a specific function? Let's take a look at the example. We will find that JavaScript events are exactly the same as C# events. The binding of events is superimposed (=) instead of overridden.

Copy code 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 first, and then "Pay first" will pop up, indicating that its binding is performed through onclick =fn. Let’s modify the ready method:

Copy the code The code is as follows:

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

An error occurred again. Haha, if you click the button this time, only PayMoney will be executed and Eat will not be executed. Then if you unbind() If placed after bind, this button will not work. But what if I want to remove the bound PayMoney method? At this time we should write like this:

Copy the code 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 counts Calculation), let us experience it up close

Copy code The code is as follows:

Guess what will be displayed? Have a meal? Pay? The answer is Eat -> PayMoney, ah! ! ! I canceled the binding here and deleted the specific binding. Why is Eat still executed? The reason for this depends on the jQuery class library. I guess it only deletes those events bound through JQuery, haha. So what should we do at this time? Fortunately, jQuery has many methods, one of which is attr, which operates on the attributes of the Dom element. We use attr to eliminate the click event on the input. $("#testButton").attr("onclick", ""); This will clear the onclick event. Remember, because attr is an attribute of the element, you should write "onclick" instead of click here because Click is the abbreviation of jQuery encapsulation. Okay, that’s it for the binding. Here’s a scene for everyone to remember: One day, Lao Ying, Lao Zhao, and Lao Chen went out to eat. They were full, drunk, and ready to pay. At this time

Copy code The code is as follows:

：