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");