bind() and unbind() in JQuery provide event binding and cancellation mechanisms, which can bind events supported by html and custom events. JQuery supports custom events, which obviously brings great flexibility to programming. Let’s learn some features of jquery event processing together.
1. Events in JQuery can be repeatedly bound and will not be overwritten.
$("#button1").bind("click",function(){
alert("func1");
});
$("#button1").bind("click",function(){
alert("func2");
});
When button1 is clicked, these two event handling functions will be fired. Maybe you would say that the above binding is different anonymous functions, occupying different memory space. This is true, but even the same processing function still has the problem of repeated binding. When button1 is clicked, the following event handling function will also be called twice.
$("#button1").bind("click",sameFunc);
$("#button1").bind("click",sameFunc);
function sameFunc()
{
alert("func");
}
In most scenarios, event handling functions only need to be bound once, so you must pay attention to the repeated binding feature of JQuery events. Even if there is no bug, it is not a good practice.
2. Use bind to bind multiple events and processing functions at once.
If multiple events require registering the same processing function, you can use the following code to simplify it (event names are separated by spaces):
$("#button1").bind("mousedown mouseup",function(){
(11);
});
If the handling function of each event is different, you can use the following method (json object):
$("#button1").bind(
{
"mousedown":function(){
("mousedown");
},
"mouseup":function(){
("mouseup");
}
}
);
3. Pass event object and custom parameters.
Generally speaking, when using jquery, we rarely need event objects, and we do not need to pass customized parameters to event handlers. But if we really need to do this, JQuery supports it too.
$("#button1").bind("click", {name:"aty"}, function(eventObject){
alert("params=" + );
});
eventObject is very similar to event objects in IE and FF, through which it can obtain more detailed information when events occur. If we specify a custom parameter, then JQuery will place it in the data property of the event object, that is, we can get the parameter value we passed.
4. Three forms of event cancellation.
Unbind is used to cancel the event handling function previously bound through bind. In general, there are three forms: cancel all events, cancel an event of a certain type, and cancel an event handling function under a certain type.
If we bind click, mouseup, mousedown events to button1, the click event binds two processing functions.
$("#button1").bind("click",function(eventObj){
("click1");
});
$("#button1").bind("click",function(eventObj){
("click2");
});
$("#button1").bind("mouseup",function(eventObj){
("mouseup");
});
$("#button1").bind("mousedown",function(eventObj){
("mousedown");
});
$("#button1").unbind(): Cancel all bound event handling functions on button1.
$("#button1").unbind("click"): Only cancel the event handler of the click type bound on button1.
These two forms are easy to understand and are also the most commonly used methods of programming in our daily programming. In the above code, we have registered two click-type event handlers. What should we do if we want to cancel the second click event handler and the first reserved? Since we are registering an anonymous function, there is no way to implement it. The following code is wrong and does not achieve the expected results.
$("#button1").bind("click",function(eventObj){
("click1");
});
$("#button1").bind("click",function(eventObj){
("click2");
});
// try to cancel function2
$("#button1").unbind("click",function(eventObj){
("click2");
});
Although the anonymous function functions used by bind and unbind are the same, these two functions are not the same javascript object because they occupy different memory space. Smart you may have thought: If bind and unbind use different functions, can you achieve your goal? That's true, the following code is correct.
$("#button1").bind("click",func1);
$("#button1").bind("click",func2);
// try to cancel function2
$("#button1").unbind("click",func2);
function func1()
{
("click1");
}
function func2()
{
("click2");
}
This is the third form of unbind. You can see that this approach is very bad, because this approach does not allow the use of anonymous functions, and we have to expose global functions (at least it is required to be visible when unbind). JQuery provides event namespace mechanism, and I personally feel that it is to solve this problem.
5. Event namespace.
As mentioned above, event namespace is to solve the problems encountered in the third form of unbind. Here is the explanation of JQuery's official API documentation:
Instead of maintaining references to handlers in order to unbind them, we can namespace the events and use this capability to narrow the scope of our unbinding actions.
The so-called event namespace actually attaches an alias after the event type with a dot syntax to refer to the event, such as "", where "a" is the alias for clicking the current event type, that is, the event namespace. Since dot numbers are used to define namespaces, if we use custom events, the event name must not contain dot numbers, otherwise it will cause unexpected problems. There is no need to try this kind of problem. If you can use special characters, you won’t use them, otherwise you will cause trouble for yourself.
$("#button1").bind("",function(eventObj){
("click1");
});
$("#button1").bind("",function(eventObj){
("click2");
});
// success to cancel function2
$("#button1").unbind("");
You can see that using namespaces can cancel an event handler function under a certain event type in a more elegant way. It is worth mentioning here: the namespace used does not conflict with unbind, and the above three forms of unbind can still be used normally. $("#button1").unbind() can still cancel all events on button1, and $("#button1").unbind("click") can still cancel all click events. This compatibility design is great.
There is another benefit to using a namespace: it can cancel events by namespace.
// 2 namespaces a and b$("#button1").bind("",function(eventObj){
("click1");
});
$("#button1").bind("",function(eventObj){
("click2");
});
$("#button1").bind("",function(eventObj){
("mouseup");
});
$("#button1").bind("",function(eventObj){
("mousedown");
});
In this code we use 2 namespaces a and b, if I just want to keep the 2nd click event handler function, all the rest will be deleted. We can achieve our goal in two ways:
Method 1:
$("#button1").unbind("");
$("#button1").unbind("mouseup");
$("#button1").unbind("mousedown");
Method 2:
$("#button1").unbind(".a");
Obviously, Method 2 is simpler and more skillful. Although the code is less easy to understand, you can understand it as long as you are familiar with JQuery. If there are codes you can't understand in the project, there are only two situations: either others can't do it, the code is bad; or you can't do it yourself, and you have little knowledge. If you are not familiar with a certain language, how can you write good code with it? Therefore, code quality, development efficiency, and personal skill level and team level are closely related.
The above is the characteristics of jQuery event processing (event naming mechanism) introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!