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