JQuery中的bind()和unbind()，提供了事件的綁定和取消機(jī)制，既可以綁定html默認(rèn)支持的事件，也能夠綁定自定義的事件。JQuery支持自定義事件，這顯然給編程帶來(lái)了極大的靈活性。下面就一起學(xué)習(xí)下，jquery事件處理的一些特性。

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

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

當(dāng)點(diǎn)擊button1的時(shí)候，這2個(gè)事件處理函數(shù)都會(huì)觸發(fā)。也許你會(huì)說(shuō)，上面綁定的是不同的匿名函數(shù)，占用不同的內(nèi)存空間。的確是這樣的，不過(guò)就算是同一個(gè)處理函數(shù)，依然存在重復(fù)綁定問(wèn)題。當(dāng)button1被點(diǎn)擊的時(shí)候，下面的事件處理函數(shù)同樣會(huì)被調(diào)用2次。

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

絕大部分場(chǎng)景下，事件處理函數(shù)都只需要綁定一次，所以一定要注意JQuery事件的重復(fù)綁定這個(gè)特性，事件多次執(zhí)行，就算沒(méi)有bug，終究也不是好的做法。

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

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

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

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

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

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

一般來(lái)說(shuō)，使用jquery的時(shí)候我們很少需要event對(duì)象，也不需要向事件處理函數(shù)傳遞自定義的參數(shù)。不過(guò)如果我們真的需要這么做，JQuery也是支持的。

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

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

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

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

假如我們給button1綁定了click、mouseup、mousedown事件，其中click事件綁定2個(gè)處理函數(shù)。

$("#button1").bind("click",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click",function(eventObj){ 
console.log("click2"); 
}); 
$("#button1").bind("mouseup",function(eventObj){ 
console.log("mouseup"); 
}); 
$("#button1").bind("mousedown",function(eventObj){ 
console.log("mousedown"); 
});

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

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

這2種形式很好理解，也是我們平時(shí)編程最常用的做法。上面的代碼我們注冊(cè)了2個(gè)click類型的事件處理函數(shù)，如果要取消第2個(gè)click事件處理函數(shù)，第1個(gè)保留，應(yīng)該怎么辦呢？由于我們注冊(cè)的是匿名函數(shù)，所以沒(méi)有辦法實(shí)現(xiàn)。下面的代碼是錯(cuò)誤的，達(dá)不到預(yù)期的效果。

$("#button1").bind("click",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click",function(eventObj){ 
console.log("click2"); 
}); 
// try to cancel function2
$("#button1").unbind("click",function(eventObj){ 
console.log("click2"); 
});

雖然bind和unbind是用的匿名函數(shù)功能是相同的，但是這2個(gè)函數(shù)不是同一個(gè)javascript對(duì)象，因?yàn)樗鼈冋加貌煌膬?nèi)存空間。聰明的你可能已經(jīng)想到：如果bind和unbind使用不同函數(shù)，是不是就能達(dá)到目的了？確實(shí)是這樣，下面的代碼是正確的。

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

這就是unbind的第三種使用形式，可以看到這種做法非常的不好，因?yàn)檫@種做法不允許使用匿名函數(shù)，我們不得不暴露全局的函數(shù)(至少要求unbind的時(shí)候能夠看得見(jiàn))。JQuery提供了事件命名空間機(jī)制，個(gè)人感覺(jué)就是為了解決這個(gè)問(wèn)題。

5、事件命名空間。

上面已經(jīng)提到，事件命名空間就是為了解決unbind第三種形式遇到的問(wèn)題。下面是JQuery官方API文檔的解釋：

Instead of maintaining references to handlers in order to unbind them, we can namespace the events and use this capability to narrow the scope of our unbinding actions.

所謂事件命名空間，其實(shí)就是在事件類型后面以點(diǎn)語(yǔ)法附加一個(gè)別名，以便引用事件，如”click.a”，其中”a”就是click當(dāng)前事件類型的別名，即事件命名空間。由于點(diǎn)號(hào)是用來(lái)定義命名空間的，所以如果我們使用了自定義事件，那么事件名稱一定不要包含點(diǎn)號(hào)，否則會(huì)引起意想不到的問(wèn)題。這種問(wèn)題，沒(méi)有嘗試的必要，特殊字符能不用則不用，否則是給自己找麻煩。

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

可以看到：使用命名空間，能夠以一種更優(yōu)雅的方式取消某種事件類型下的某個(gè)事件處理函數(shù)。這里值得一提：使用了命名空間與unbind并不沖突，上面三種形式的unbind依然可以正常使用。$("#button1").unbind()依然可以取消button1上的所有事件，$("#button1").unbind("click")依然可以取消所有的click事件。這種兼容性設(shè)計(jì)是非常棒的。

使用命名空間還要1個(gè)好處：能夠按照命名空間來(lái)取消事件。

// 2個(gè)命名空間a和b
$("#button1").bind("click.a",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click.b",function(eventObj){ 
console.log("click2"); 
}); 
$("#button1").bind("mouseup.a",function(eventObj){ 
console.log("mouseup"); 
}); 
$("#button1").bind("mousedown.a",function(eventObj){ 
console.log("mousedown"); 
});

這段代碼我們使用2個(gè)命名空間a和b，如果我只想要保留第2個(gè)click事件處理函數(shù)，其余的全部刪除。我們可以有2種方式達(dá)到目的：

方式1：

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

方式2：

$("#button1").unbind(".a");

很顯然方式2更加簡(jiǎn)單，更加技巧性，雖然代碼更不容易看懂，不過(guò)只要你熟悉JQuery就能看懂。項(xiàng)目中如果出現(xiàn)了你看不懂的代碼，只有2種情況：要么別人不行，代碼寫(xiě)的爛；要么自己不行，知識(shí)懂的少。如果不熟悉某種語(yǔ)言，又怎能用它寫(xiě)好代碼呢？所以，代碼質(zhì)量、開(kāi)發(fā)效率，和個(gè)人技能水平，團(tuán)隊(duì)水平緊密相關(guān)。

以上所述是小編給大家介紹的jQuery事件處理的特征(事件命名機(jī)制)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論