6. Events (事件管理)

從這一章開始，我將正式介紹Backbone的內容，過程中會有許多例子和程式碼，你應該將這些程式碼複製到你的頁面，並檢視它們的執行效果。

我介紹的第一個模組是Backbone.Events（事件管理），因為我在介紹任何其它的模組時都會提到它，你可以想象到它的重要性。

Events是Backbone中所有其它模組的基類，無論是Model、Collection、View還是Router和History，都繼承了Events中的方法。

Events為其它的模組提供了事件管理相關的方法，包括on、off和trigger.

假如你熟悉jQuery，你可以跳過本節，因為它們與jQuery中的bind、unbind和trigger方法非常類似，但我並不建議你這樣做，因為它們之間仍有不同。

我們無法直接例項化一個Events物件，因為它必須要依賴於Backbone中的某一個模組類（或子類）才能使用，例如：

// 建立一個Model的例項
var m = new Backbone.Model();
// 將監聽函式繫結到m物件的自定義事件custom中
m.on('custom', function(index) {
	// 監聽函式接收並顯示引數index
	alert(index);
});
// 迴圈觸發m物件的custom事件
for(var i = 0; i < 3; i++) {
	m.trigger('custom', i);
}
// 從m物件的custom事件中移除已繫結的所有監聽函式
m.off('custom');
// 試著再次觸發custom事件
m.trigger('custom', i);
 

    我們建立了一個Model的例項，Model是Backbone中的資料模型類，目前你只需要知道它繼承了Events類中的方法。

我們通過on方法給m物件的自定義事件custom綁定了一個監聽函式，監聽函式會接收一個引數index並將它顯示出來。接著我們在一個迴圈中呼叫m物件的trigger方法觸發custom事件，結果正如你看到的：監聽函式接收了引數i並將其顯示出來。最後我們通過off方法移除m物件custom事件中已繫結的監聽函式，當試著再次觸發custom事件時，不會再執行任何動作。

（在本例中，我們建立了Model類的例項，這僅僅是為了讓例子顯得更簡單，而實際上我們常常都會繼承Model而不是直接例項化）

通過上面的例子中，我們可以為Events中的方法這樣定義：

•  on：將一個函式繫結到物件的某個事件中
• off：移除物件某個事件中已繫結的所有函式（實際上它還可以只移除指定的函式，或移除物件中已繫結的所有事件，這與呼叫off方法時傳遞的引數有關，請參考API文件）
• trigger：觸發物件的某個事件

 這看起來和jQuery中的事件方法非常類似（當然，jQuery還支援DOM事件），接下來我們再看另一個例子：

// 建立一個Model的例項
var m = new Backbone.Model();

// 將監聽函式繫結到m物件的all事件中
m.on('all', function() {
	alert('all');
});
// 將監聽函式繫結到m物件的自定義事件show中
m.on('show', function() {
	alert('show title');
});
// 將另一個監聽函式繫結到m物件的自定義事件show中
m.on('show', function() {
	alert('show content');
});
// 將監聽函式繫結到m物件的自定義事件hide中
m.on('hide', function() {
	alert('hide');
});
// 觸發m物件的show事件和hide事件
m.trigger('show');
m.trigger('hide');

執行顯示的結果分別為：

show title

show content

all

hide

all

在本例中，我們為m物件的all事件綁定了監聽函式，all是Backbone中一個特殊的事件，它在當前物件觸發任何事件之後，都會被自動觸發。（你也可以通過trigger直接觸發all事件）

你需要注意監聽函式的呼叫順序，all事件總會在其它事件中的監聽函式都執行完畢之後觸發，同一個事件中如果綁定了多個監聽函式，那它們將按照函式繫結時的順序依次呼叫。

在Backbone內部，會為每個物件新增一個_callbacks私有屬性，用於記錄該物件中繫結的事件和監聽函式列表。Events類的on、off和trigger方法都圍繞每個物件的_callbacks列表在操作。

如果喜歡，請點個贊，關注公眾號，我們將最好的內容分享於你！謝謝！