jQuery中綁定事件的命名空間詳解

在沒有看到這篇 文章之前，我一直不知道原來bind也可以有命名空間。事實上，我看完這篇文章後，再去翻了一下手冊，也才發現了一點點的注釋。但手冊也僅僅是一句話就帶 過去了。沒有過多的深究，或許他認為命名空間這玩意很簡單，沒有必要多解釋？

先看手冊，由於bind方法有三個參數(type,[data],fn)，所以手冊上這麼介紹:

.bind() 方法是用於往文檔上附加行為的主要方式。所有JavaScript事件對象， 比如focus, mouseover, 和 resize，都是可以作為type參數傳遞進來的。

jQuery還提供了一些綁定這些標準事件類型的簡單方式，比如.click()用於簡 化.bind('click')。一共有以下這 些：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。

任何作為type參數的字串都是合法的；如果一個字串不是原生的JavaScript事件名， 那麼這個事件處理函數會綁定到一個自訂事件上。這些自訂事件絕對不會由瀏覽器觸發，但可以通過使用.trigger()或 者.triggerHandler()在其他代碼中手動觸發。

如果type參數的字串中包含一個點(.)字元， 那麼這個事件就看做是有命名空間的了。這個點字元就用來分隔事件和他的命名空間。舉例來說，如果執 行 .bind('click.name', handler) ，那麼字串中的 click 是事件類型，而字串 name 就是命名空間。命名空 間允許我們取消綁定或者觸發一些特定類型的事件，而不用觸發別的事件。參考unbind()來擷取更多資訊。

當一個事件傳到一個元素上，所有綁定在上面的針對哪個事件的處理函數都會觸發。如果註冊了多個事件 處理函數，總是按照綁定的順序依次觸發。當所有綁定的事件處理函數執行完畢後，事件繼續沿著普通的事件冒泡途徑上浮。



jQuery的 bind / unbind 方法應該說使用很簡單，而且大多數時候 可能並不會用到，取而代之的是直接用 click / keydown 之類的事件名風格的方法來做事件綁定操作。

但假設如下情況：需要在運行時根據使用者互動的結果進行不同click事件處理邏輯的綁定，因而理論 上會無數次對某一個事件進行 bind / unbind 操作。但又希望 unbind 的時候只把自己綁上去的處理邏輯給釋放掉而不是所有其他地方有 可能的額外的同一事件綁定邏輯。

這時候如果直接用 .click() / .bind('click') 加 上 .unbind('click') 來進行重複綁定的話，被 unbind 掉的將是所有綁定在元素上的 click 處理邏輯，潛在會影響到該元素 其他第三方的行為。當然如果在bind的時候是顯示定義了function變數的話，可以在unbind的時候提供 function作為第二個參數來指 定只unbind其中一個處理邏輯，但實際應用中很可能會碰到各種進行匿名函數綁定的情況。

對於這種問題，jQuery的解決方案是使用事件綁定的命名空間。即在事件名稱後添 加 .something 來區分自己這部分行為邏輯範圍。

比如 用 .bind('click.myCustomRoutine',function(){...}); 同樣是把匿名函數綁定到 click 事件（你 可以用自己的命名空間多次綁定不同的行為方法上去），當unbind的時候用 .unbind('click.myCustomRoutine') 即可 釋放所有綁定到 .myCustomRoutine 命名空間的 click 事件，而不會解除其他通過 .bind('click') 或另外的命名 空間所綁定的事件行為。

同時，使用命令空間還可以讓你一次性 unbind 所有此命名空間下的自訂事件綁定，通 過 .unbind('.myCustomRoutine') 即可。

要注意的是，jQuery的命名空間並不支援多級空間。因為在jQuery裡面，如果 用 .unbind('click.myCustomRoutine.myCustomSubone') ，解除的是命名空間分別 為 myCustomRoutine 和 myCustomSubone 的兩個並列命名空間下的所有 click 事件，而不 是 "myCustomRoutine 下的 myCustomSubone 子空間"。

jQuery的 bind / unbind 方法應該說使用很簡單，而且大多數時候可能並不會用到，取而代之的是直接用 click / keydown 之類的事件名風格的方法來做事件綁定操作。

但假設如下情況：需要在運行時根據使用者互動的結果進行不同click事件處理邏輯的綁定，因而理論上會無數次對某一個事件進行 bind / unbind 操作。但又希望 unbind 的時候只把自己綁上去的處理邏輯給釋放掉而不是所有其他地方有可能的額外的同一事件綁定邏輯。

這時候如果直接用 .click() / .bind('click') 加上 .unbind('click') 來進行重複綁定的話，被 unbind 掉的將是所有綁定在元素上的 click 處理邏輯，潛在會影響到該元素其他第三方的行為。當然如果在bind的時候是顯示定義了function變數的話，可以在unbind的時候提供function作為第二個參數來指定只unbind其中一個處理邏輯，但實際應用中很可能會碰到各種進行匿名函數綁定的情況。

對於這種問題，jQuery的解決方案是使用事件綁定的命名空間。即在事件名稱後添加 .something 來區分自己這部分行為邏輯範圍。

比如用 .bind('click.myCustomRoutine',function(){...}); 同樣是把匿名函數綁定到 click 事件（你可以用自己的命名空間多次綁定不同的行為方法上去），當unbind的時候用 .unbind('click.myCustomRoutine') 即可釋放所有綁定到 .myCustomRoutine 命名空間的 click 事件，而不會解除其他通過 .bind('click') 或另外的命名空間所綁定的事件行為。

同時，使用命令空間還可以讓你一次性 unbind 所有此命名空間下的自訂事件綁定，通過 .unbind('.myCustomRoutine') 即可。

要注意的是，jQuery的命名空間並不支援多級空間。因為在jQuery裡面，如果用 .unbind('click.myCustomRoutine.myCustomSubone') ，解除的是命名空間分別為 myCustomRoutine 和 myCustomSubone 的兩個並列命名空間下的所有 click 事件，而不是 "myCustomRoutine 下的 myCustomSubone 子空間"。