瞭解JQuery的事件綁定特性和事件命名空間機制，編寫更好、更靈活的事件處理代碼

轉載自：http://blog.csdn.net/aitangyong/article/details/43157899

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

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

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

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

$("#button1").bind("click",sameFunc);
$("#button1").bind("click",sameFunc);

function sameFunc()
{
    alert("func");
}

絕大部分場景下，事件處理函數都只需要綁定一次，所以一定要注意JQuery事件的重複綁定這個特性，事件多次執行，就算沒有bug，終究也不是好的做法。

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對象和自定義參數。

一般來說，使用jquery的時候我們很少需要event對象，也不需要向事件處理函數傳遞自定義的參數。不過如果我們真的需要這麼做，JQuery也是支持的。

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

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

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

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

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

$("#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上所有已經綁定的事件處理函數。

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

這2種形式很好理解，也是我們平時編程最常用的做法。上面的代碼我們註冊了2個click類型的事件處理函數，如果要取消第2個click事件處理函數，第1個保留，應該怎麼辦呢？由於我們註冊的是匿名函數，所以沒有辦法實現。下面的代碼是錯誤的，達不到預期的效果。

$("#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是用的匿名函數功能是相同的，但是這2個函數不是同一個javascript對象，因爲它們佔用不同的內存空間。聰明的你可能已經想到：如果bind和unbind使用同一個函數，是不是就能達到目的了？確實是這樣，下面的代碼是正確的。

$("#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的第三種使用形式，可以看到這種做法非常的不好，因爲這種做法不允許使用匿名函數，我們不得不暴露全局的函數(至少要求unbind的時候能夠看得見)。JQuery提供了事件命名空間機制，個人感覺就是爲了解決這個問題。

 

5、事件命名空間。

上面已經提到，事件命名空間就是爲了解決unbind第三種形式遇到的問題。下面是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.

所謂事件命名空間，其實就是在事件類型後面以點語法附加一個別名，以便引用事件，如”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事件。這種兼容性設計是非常棒的。

使用命名空間還要1個好處：能夠按照命名空間來取消事件。

// 2個命名空間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個命名空間a和b，如果我只想要保留第2個click事件處理函數，其餘的全部刪除。我們可以有2種方式達到目的：

方式1：

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

方式2：

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

很顯然方式2更加簡單，更加技巧性，雖然代碼更不容易看懂，不過只要你熟悉JQuery就能看懂。項目中如果出現了你看不懂的代碼，只有2種情況：要麼別人不行，代碼寫的爛；要麼自己不行，知識懂的少。如果不熟悉某種語言，又怎能用它寫好代碼呢？所以，代碼質量、開發效率，和個人技能水平，團隊水平緊密相關。