Backbone.js Event 事件介紹

今天我們可以來介紹

Backbone.js Event 事件，介紹 Event 之前，大家可以先看看 Backbone.js 的初學介紹，該教學文件可以學習如何載入 Backbone.js library，利用此套件如何去制定各種事件。Backbone.js 提供了3個 method 去控制事件產生、移除、執行，分別是 on(bind)、off(unbind)、trigger。文字上寫得很清楚 on 就等於 bind，off 就是 unbind，最後就是如何去 trigger 事件。底下就來簡單舉例:

綁定事件底下例子可以幫助我們建立一個事件 html:


  
    backbone.js bind event

backbone.js

Backbone.Events.on('test', function(){ alert('I am appleboy'); });
$(document).on('click', '.add_1', function(event){
    Backbone.Events.trigger('test');
});

上面可以看到我們點選按鈕後，backbone.js 會觸發已註冊的 test 事件，那也許讀者會覺得每次都要寫 Backbone.Events 這麼長的字串很不方便，我們也可以自訂變數喔，把 js 改成底下即可

var object = {};
_.extend(object, Backbone.Events);
object.on('click_me', function(){ alert('click me'); });
$(document).on('click', '.add_2', function(event){
    object.trigger('click_me');
});

建立一個空 object，再利用

underscore.js 套件 extend Backbone.Events 物件，這樣就可透過 object.on 來使用了，另外如果想要綁定全部事件，那就第一個參數帶入 all，也就是

object.on('all', function(){ alert('click me'); });
$(document).on('click', '.add_2', function(event){
    object.trigger('click_me2');
    object.trigger('click_me2');
});

當我們點選按鈕時，就會跳出兩次 click me

移除事件透過 Backbone.Events.off 可以移除事件內的單一 callback，或者是移除任何 event 或是移除全部 events，底下我們先建立三個事件

var change_1 = function() {
    alert('change_1');
};
var change_2 = function() {
    alert('change_2');
};
var change_3 = function() {
    alert('change_3');
};
object.on('click_event', change_1);
object.on('click_event', change_2);
object.on('click_event', change_3);
$(document).on('click', '.add_3', function(event){
    object.trigger('click_event');
});

上面程式碼可以看到，點選按鈕後會跳出三個不同 alert 訊息，接著透過 object.off('click\_event', change\_1); 來移除事件 callback

$(document).on('click', '.remove_1', function(event){
    object.off('click_event', change_1);
    alert('remove change_1 function');
});
$(document).on('click', '.remove_2', function(event){
    object.off('click_event', change_2);
    alert('remove change_2 function');
});
$(document).on('click', '.remove_3', function(event){
    object.off('click_event', change_3);
    alert('remove change_3 function');
});

如果不想這麼麻煩，那該如何移除事件全部 callbacks 呢，可以透過

$(document).on('click', '.remove_event', function(event){
    object.off('click_event');
    alert('remove all event');
});

移除全部綁定的 events 可以透過

$(document).on('click', '.remove_all_event', function(event){
    object.off();
    alert('remove all event');
});

trigger 事件用法很單純，如果要 trigger 單一 callback 可以透過底下:

object.trigger('click_event');

trigger 多個 callback function，利用 space 區隔開就可以了

object.trigger('click_event_1 click_event_2 click_event_3');

直接看 Demo

綁定事件 底下例子可以幫助我們建立一個事件 html:

backbone.js bind event

移除事件 透過 Backbone.Events.off 可以移除事件內的單一 callback，或者是移除任何 event 或是移除全部 events，底下我們先建立三個事件

trigger 事件 用法很單純，如果要 trigger 單一 callback 可以透過底下:

See also

綁定事件底下例子可以幫助我們建立一個事件 html:

移除事件透過 Backbone.Events.off 可以移除事件內的單一 callback，或者是移除任何 event 或是移除全部 events，底下我們先建立三個事件

trigger 事件用法很單純，如果要 trigger 單一 callback 可以透過底下: