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

bind()和unbind()提供了事件的綁定和取消機制，既可以綁定html默認支持的事件，也能夠綁定自定義的事件。

1、JQuery中事件可以重復綁定，不會覆蓋。

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

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

當點擊button1的時候，這2個事件處理函數都會觸發。上面綁定的是不同的匿名函數，占用不同的內存空間。就算是同一個處理函數，依然存在重復綁定問題。當button1被點擊的時候，上面的事件處理函數同樣會被調用2次。

2、使用bind一次綁定多個事件和處理函數。

如果多個事件需要注冊相同的處理函數，那么可以使用如下代碼進行簡化(事件名稱使用空格分隔)：

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

如果每個事件的處理函數不同，那么可以使用如下的方式(json對象)：

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

3、傳遞event對象和自定義參數

 

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

eventObject很像IE和FF中的event對象，通過它能夠獲取事件發生時更詳細的信息。如果我們指定了自定義的參數，那么JQuery會將它放在事件對象的data屬性中，即通過eventObject.data就能夠拿到我們傳遞的參數值。

4、事件取消的三種形式。

unbind用來取消之前通過bind綁定的事件處理函數，總的來說有三種形式：取消所有事件、取消某種類型的事件、取消某種類型下的某個事件處理函數。

 

$("#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");    
} 

 

$("#button1").unbind()：取消button1上所有已經綁定的事件處理函數。

$("#button1").unbind("click")：只取消button1上綁定的click類型的事件處理函數。

 

雖然bind和unbind是用的匿名函數功能是相同的，但是這2個函數不是同一個javascript對象，因為它們占用不同的內存空間。可以看到這種做法非常的不好，因為這種做法不允許使用匿名函數，我們不得不暴露全局的函數(至少要求unbind的時候能夠看得見)。JQuery提供了事件命名空間機制

5、事件命名空間。

所謂事件命名空間，其實就是在事件類型后面以點語法附加一個別名，以便引用事件，如”click.a”，其中”a”就是click當前事件類型的別名，即事件命名空間。

$("#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");

可以看到：使用命名空間，能夠以一種更優雅的方式取消某種事件類型下的某個事件處理函數。這里值得一提：使用了命名空間與unbind並不沖突，上面三種形式的unbind依然可以正常使用。$("#button1").unbind()依然可以取消button1上的所有事件，$("#button1").unbind("click")依然可以取消所有的click事件。

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