JQuery中的bind()和unbind()的理解

bind()和unbind()提供了事件的绑定和取消机制，既能够绑定html默认支持的事件，也可以绑定自定义的事件。

一、JQuery中事件能够重复绑定，不会覆盖。

1 $("#button1").bind("click",function(){  
2     alert("func1");  
3 });  
4 $("#button1").bind("click",function(){  
5     alert("func2");  
6 });

1 $("#button1").bind("click",sameFunc);  
2 $("#button1").bind("click",sameFunc);  
3   
4 function sameFunc()  
5 {  
6     alert("func");  
7 } 

当点击button1的时候，这2个事件处理函数都会触发。上面绑定的是不一样的匿名函数，占用不一样的内存空间。就算是同一个处理函数，依然存在重复绑定问题。当button1被点击的时候，上面的事件处理函数一样会被调用2次。

二、使用bind一次绑定多个事件和处理函数。

若是多个事件须要注册相同的处理函数，那么可使用以下代码进行简化(事件名称使用空格分隔)：

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

若是每一个事件的处理函数不一样，那么可使用以下的方式(json对象)：

 1 $("#button1").bind(  
 2     {  
 3         "mousedown":function(){  
 4             console.log("mousedown");  
 5         },  
 6         "mouseup":function(){  
 7             console.log("mouseup");  
 8         }  
 9     }  
10 ); 

三、传递event对象和自定义参数

 

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

eventObject很像IE和FF中的event对象，经过它可以获取事件发生时更详细的信息。若是咱们指定了自定义的参数，那么JQuery会将它放在事件对象的data属性中，即经过eventObject.data就可以拿到咱们传递的参数值。

四、事件取消的三种形式。

unbind用来取消以前经过bind绑定的事件处理函数，总的来讲有三种形式：取消全部事件、取消某种类型的事件、取消某种类型下的某个事件处理函数。

 

 1 $("#button1").bind("click",func1);   
 2 $("#button1").bind("click",func2);   
 3   
 4 // try to cancel function2  
 5 $("#button1").unbind("click",func2);   
 6   
 7 function func1()  
 8 {  
 9     console.log("click1");    
10 }  
11   
12 function func2()  
13 {  
14     console.log("click2");    
15 } 

 

$("#button1").unbind()：取消button1上全部已经绑定的事件处理函数。

$("#button1").unbind("click")：只取消button1上绑定的click类型的事件处理函数。

 

虽然bind和unbind是用的匿名函数功能是相同的，可是这2个函数不是同一个javascript对象，由于它们占用不一样的内存空间。能够看到这种作法很是的很差，由于这种作法不容许使用匿名函数，咱们不得不暴露全局的函数(至少要求unbind的时候可以看得见)。JQuery提供了事件命名空间机制

五、事件命名空间。

所谓事件命名空间，其实就是在事件类型后面以点语法附加一个别名，以便引用事件，如”click.a”，其中”a”就是click当前事件类型的别名，即事件命名空间。

1 $("#button1").bind("click.a",function(eventObj){    
2     console.log("click1");    
3 });   
4 $("#button1").bind("click.b",function(eventObj){    
5     console.log("click2");    
6 });   
7   
8 // success to cancel function2  
9 $("#button1").unbind("click.a");

能够看到：使用命名空间，可以以一种更优雅的方式取消某种事件类型下的某个事件处理函数。这里值得一提：使用了命名空间与unbind并不冲突，上面三种形式的unbind依然能够正常使用。$("#button1").unbind()依然能够取消button1上的全部事件，$("#button1").unbind("click")依然能够取消全部的click事件。

1 $("#button1").unbind("click.a");  
2 $("#button1").unbind("mouseup");  
3 $("#button1").unbind("mousedown");  
4 $("#button1").unbind(".a");