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

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

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 functionsameFunc()5 {6 alert("func");7 }

當(dāng)點擊button1的時候，這2個事件處理函數(shù)都會觸發(fā)。上面綁定的是不同的匿名函數(shù)，占用不同的內(nèi)存空間。就算是同一個處理函數(shù)，依然存在重復(fù)綁定問題。當(dāng)button1被點擊的時候，上面的事件處理函數(shù)同樣會被調(diào)用2次。

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

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

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

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

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

3、傳遞event對象和自定義參數(shù)

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

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

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

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

1 $("#button1").bind("click",func1);2 $("#button1").bind("click",func2);3

4 //try to cancel function2

5 $("#button1").unbind("click",func2);6

7 functionfunc1()8 {9 console.log("click1");10 }11

12 functionfunc2()13 {14 console.log("click2");15 }

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

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

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

5、事件命名空間。

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

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

可以看到：使用命名空間，能夠以一種更優(yōu)雅的方式取消某種事件類型下的某個事件處理函數(shù)。這里值得一提：使用了命名空間與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");

總結(jié)

以上是生活随笔為你收集整理的jquery unbind 异步_JQuery中的bind()和unbind()的理解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。