今天我們可以來介紹 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
$(document).on('click', '.add_1', function(event){
Backbone.Events.trigger('test');
});
上面可以看到我們點選按鈕後，backbone.js 會觸發已註冊的 test 事件，那也許讀者會覺得每次都要寫 Backbone.Events 這麼長的字串很不方便，我們也可以自訂變數喔，把 js 改成底下即可
_.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，也就是
$(document).on('click', '.add_2', function(event){
object.trigger('click_me2');
object.trigger('click_me2');
});
當我們點選按鈕時，就會跳出兩次 click me
移除事件
透過 Backbone.Events.off 可以移除事件內的單一 callback，或者是移除任何 event 或是移除全部 events，底下我們先建立三個事件
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
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 呢，可以透過
object.off('click_event');
alert('remove all event');
});
移除全部綁定的 events 可以透過
object.off();
alert('remove all event');
});
trigger 事件
用法很單純，如果要 trigger 單一 callback 可以透過底下:
trigger 多個 callback function，利用 space 區隔開就可以了
Pingback: Backbone.js Model and Collection Tregger Event | 小惡魔 - 電腦技術 - 工作筆記 - AppleBOY
Pingback: Backbone.js event bind 新功能 listenTo and stopListening | 小惡魔 - 電腦技術 - 工作筆記 - AppleBOY