About the characteristics of jQuery event processing (event naming mechanism)-JS Tutorial-php.cn

This article mainly introduces you to some features of jquery event processing and related knowledge of jquery event naming mechanism. The introduction is very detailed and has reference value. Friends who are interested can read it together

JQuery The bind() and unbind() in provide an event binding and cancellation mechanism, which can bind events supported by html by default as well as custom events. JQuery supports custom events, which obviously brings great flexibility to programming. Let's learn together some features of jquery event processing.

1. Events in JQuery can be bound repeatedly and will not be overwritten.

$("#button1").bind("click",function(){
alert("func1");
});
$("#button1").bind("click",function(){
alert("func2");
});

Copy after login

When button1 is clicked, these two event handling functions will be triggered. Maybe you will say that the above bindings are different anonymous functions, occupying different memory spaces. This is indeed the case, but even if it is the same processing function, there is still a duplicate binding problem. When button1 is clicked, the following event handler function will also be called twice.

$("#button1").bind("click",sameFunc);
$("#button1").bind("click",sameFunc);
function sameFunc()
{
alert("func");
}

Copy after login

In most scenarios, the event processing function only needs to be bound once, so we must pay attention to the repeated binding feature of JQuery events. If the event is executed multiple times, even if there is no bug, it is not good after all. practice.

2. Use bind to bind multiple events and processing functions at one time.

If multiple events need to register the same handler function, you can use the following code to simplify (event names are separated by spaces):

$("#button1").bind("mousedown mouseup",function(){
console.log(11);
});

Copy after login

If the handler function of each event is different , then you can use the following method (json object):

$("#button1").bind(
{
"mousedown":function(){
console.log("mousedown");
},
"mouseup":function(){
console.log("mouseup");
}
}
);

Copy after login

3. Pass the event object and custom parameters.

Generally speaking, when using jquery, we rarely need event objects, and we do not need to pass custom parameters to event processing functions. But if we really need to do this, JQuery also supports it.

$("#button1").bind("click", {name:"aty"}, function(eventObject){ 
alert("params=" + eventObject.data.name); 
});

Copy after login

eventObject is very similar to the event object in IE and FF, through which you can obtain more detailed information when an event occurs. If we specify a custom parameter, JQuery will put it in the data attribute of the event object, that is, we can get the parameter value we passed through eventObject.data.

4. Three forms of event cancellation.

unbind is used to cancel the event processing function previously bound by bind. Generally speaking, there are three forms: cancel all events, cancel a certain type of event, cancel a certain type of event Event handler function.

Suppose we bind click, mouseup, and mousedown events to button1, and the click event is bound to 2 processing functions.

$("#button1").bind("click",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click",function(eventObj){ 
console.log("click2"); 
}); 
$("#button1").bind("mouseup",function(eventObj){ 
console.log("mouseup"); 
}); 
$("#button1").bind("mousedown",function(eventObj){ 
console.log("mousedown"); 
});

Copy after login

$("#button1").unbind(): Cancel all bound event handlers on button1.

$("#button1").unbind("click"): Only cancel the click type event handler bound to button1.

These two forms are easy to understand and are also the most commonly used practices in our daily programming. In the above code, we registered two click event processing functions. What should we do if we want to cancel the second click event processing function and keep the first one? Since we are registering an anonymous function, there is no way to implement it. The code below is wrong and does not achieve the expected results.

$("#button1").bind("click",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click",function(eventObj){ 
console.log("click2"); 
}); 
// try to cancel function2
$("#button1").unbind("click",function(eventObj){ 
console.log("click2"); 
});

Copy after login

Although bind and unbind use the same anonymous function, these two functions are not the same JavaScript object because they occupy different memory spaces. If you are smart, you may have thought: If bind and unbind use different functions, can the purpose be achieved? This is indeed the case, the code below is correct.

$("#button1").bind("click",func1); 
$("#button1").bind("click",func2); 
// try to cancel function2
$("#button1").unbind("click",func2); 
function func1()
{
console.log("click1"); 
}
function func2()
{
console.log("click2"); 
}

Copy after login

This is the third form of using 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 unbind is required) time can be seen). JQuery provides an event namespace mechanism, which I personally feel is designed to solve this problem.

5. Event namespace.

As mentioned above, the event namespace is to solve the problems encountered in the third form of unbind. The following is an explanation from the JQuery 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 is actually appending an alias in dot syntax after the event type to reference the event, such as "click.a", where "a" is the alias of the current event type of click, that is, the event Namespaces. Since the dot is used to define the namespace, if we use a custom event, the event name must not contain the dot, otherwise it will cause unexpected problems. There is no need to try this kind of problem. Use special characters if you can, otherwise you will cause trouble for yourself.

$("#button1").bind("click.a",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click.b",function(eventObj){ 
console.log("click2"); 
}); 
// success to cancel function2
$("#button1").unbind("click.a");

Copy after login

You can see that using namespaces can cancel an event processing function under a certain event type in a more elegant way. It is worth mentioning here: the use of namespace 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.

使用命名空间还要1个好处：能够按照命名空间来取消事件。

// 2个命名空间a和b
$("#button1").bind("click.a",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click.b",function(eventObj){ 
console.log("click2"); 
}); 
$("#button1").bind("mouseup.a",function(eventObj){ 
console.log("mouseup"); 
}); 
$("#button1").bind("mousedown.a",function(eventObj){ 
console.log("mousedown"); 
});

Copy after login

这段代码我们使用2个命名空间a和b，如果我只想要保留第2个click事件处理函数，其余的全部删除。我们可以有2种方式达到目的：

方式1：

$("#button1").unbind("click.a");
$("#button1").unbind("mouseup");
$("#button1").unbind("mousedown");

Copy after login

方式2：

$("#button1").unbind(".a");

Copy after login

很显然方式2更加简单，更加技巧性，虽然代码更不容易看懂，不过只要你熟悉JQuery就能看懂。项目中如果出现了你看不懂的代码，只有2种情况：要么别人不行，代码写的烂；要么自己不行，知识懂的少。如果不熟悉某种语言，又怎能用它写好代码呢？所以，代码质量、开发效率，和个人技能水平，团队水平紧密相关。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！