JAVASCRIPT網頁應用程式設計

事件（Event）和監聽

|

31

// 繫結自訂事件

$(".class").bind("refresh.widget", function(){});

// 觸發自訂事件

$(".class").trigger("refresh.widget");

如果想要傳遞額外資訊給事件處理器，只要在呼叫

trigger()

函式時，多傳入一組參

數。接著再幫回叫函式多加一組參數，就可以接收到這些資訊：

$(".class").bind("frob.widget", function(event, dataNumber){

console.log(dataNumber);

});

$(".class").trigger("frob.widget", 5);

自訂事件和內建事件一樣，都會朝著 DOM 元件樹狀結構的上層，一層層的往外擴散

出去。

自訂事件和 jQuery 的外掛模組

自訂事件的概念，目前被廣泛的被用於開發 jQuery 外掛模組，因為自訂事件很適合用來

把和 DOM 元件互動的程式邏輯組織起來。如果對 jQuery 的外掛模組還不熟悉，可以先

翻到本書的附錄 B，那裡有一些 jQuery 的入門教學。

在開發應用程式的新功能時，應該要儘可能試著讓程式易於抽象化、易於被抽取出來做

成外掛模組。此舉不僅有助於降低程式之間的耦合程度，也能讓程式變成可重複使用的

函式庫。

以一個專門用於製作頁籤（tab）功能的 jQuery 外掛模組為例。假設想讓一組

ul

清單

回應 click 事件。當使用者點擊清單中的某個項目，就在這筆清單項目的 ...