首先讓我們來看看jQuery的自訂綁定的使用方法,你可以使用bind或live來訂閱一個事件(當然1.7以後也可以使用on了),程式碼如下:
$("#myElement").bind('customEventName',function(e){ ... }); $(".elementsClass").live('customEventName',function(e){ ... });
然後透過如下來觸發事件:
$("#myelement").trigger('customEventName');
或你也可以為自訂事件增加額外的參數,樣例如下:
$("#myelement").bind('customEventName',function(e,data){ if(data.custom) ... }); $("#myelement").trigger('customEventName',{ custom: false });
所謂魔法升級,其實是想讓整個程式所有的自訂事件能夠自動註冊並綁定jQuery上,然後執行的時候,所有註冊該事件的模組都會執行。例如模組User.js裡定義的UserUpdate方法和Blogs.js裡定義的BlogUpdate方法都定義了在發布一篇部落格的時候需要執行的function函數,整個時候我們可以透過註冊統一的事件名稱(例如BlogAdded)bind到jQuery指定的一個容器上(例如document)上,然後發布部落格成功以後,執行$(document).trigger(“BlodAdded”)就OK了。
下面我們給個通用的範例程式碼:
var components = [User, Blog, Group, Friend, Topic, Photo]; var eventTypes = ["AddComplete", "UpdateComplete", "DeleteComplete", "LockComplete", "UnLockComplete"]; $.each(components, function(i,component) { $.each(eventTypes, function(i,eventType) { var handler = component[eventType]; if (handler) $(document).bind(eventType, handler); }); })
然後每個js模組定義的程式碼安裝如下格式:
User= { AddComplete: function(e, data) { //... }, UpdateComplete: function(e, data) { //... } }
#
這樣,不管在任何地方,如果我們需要的話,就可以用jQuery的方式來觸發我們的事件了:
$(document).trigger("UpdateComplete", data);
透過這個方法,大家可以發現一個模組的method只能註冊一個事件,那麼如果我們透過一個方法來註冊多個事件觸發的話,可以使用以下方式:
var blogController = { blogAddOrUpdateComplete: function() { //... } } blogController.blogAddComplete = blogController.blogUpdateComplete = blogController.blogAddOrUpdateComplete;
最後注意:本文只是展示一個簡單的例子,不要混用不同module同一事件名稱的用法哦,比如,User.js裡的AddComplete和Blog.js裡的AddComplete可能根本就沒有關係,也就是說只處理自己對應的邏輯,這時候,就不應該統一處理這個事件,但如果要偵測的東西是一樣的話,就可以使用,例如DisableUserComplete,就可以通用,因為User模組需要處理禁用帳戶以後的操作,Blog模組可能也需要處理禁用帳戶以後的操作。
大叔手記:旨在記錄日常工作中的各種小技巧與資料(包括但不限於技術),如對你有用,請推薦一把,給大叔寫作的動力
以上是淺談jQuery的自訂綁定的詳細內容。更多資訊請關注PHP中文網其他相關文章!