首頁 > web前端 > js教程 > 主體

淺談jQuery的自訂綁定

零下一度
發布: 2017-06-19 10:52:29
原創
1345 人瀏覽過

jquery自訂綁定

首先讓我們來看看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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板