Backbone入门指南（三）：Events（事件管理）

http://yujianshenbing.iteye.com/blog/1748567

6. Events (事件管理)

　　从这一章开始，我将正式介绍Backbone的内容，过程中会有许多例子和代码，你应该将这些代码复制到你的页面，并查看它们的运行效果。

　　我介绍的第一个模块是Backbone.Events（事件管理），因为我在介绍任何其它的模块时都会提到它，你可以想象到它的重要性。

　　Events是Backbone中所有其它模块的基类，无论是Model、Collection、View还是Router和History，都继承了Events中的方法。

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

　　假如你熟悉jQuery，你可以跳过本节，因为它们与jQuery中的bind、unbind和trigger方法非常类似，但我并不建议你这样做，因为它们之间仍有不同。

　　我们无法直接实例化一个Events对象，因为它必须要依赖于Backbone中的某一个模块类（或子类）才能使用，例如：

 

Js代码  

1. // 创建一个Model的实例  
2. var m = new Backbone.Model();  
3.   
4. // 将监听函数绑定到m对象的自定义事件custom中  
5. m.on('custom', function(index) {  
6.     // 监听函数接收并显示参数index  
7.     alert(index);  
8. });  
9.   
10. // 循环触发m对象的custom事件  
11. for(var i = 0; i < 3; i++) {  
12.     m.trigger('custom', i);  
13. }  
14.   
15. // 从m对象的custom事件中移除已绑定的所有监听函数  
16. m.off('custom');  
17.   
18. // 试着再次触发custom事件  
19. 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事件），接下来我们再看另一个例子：

 

Js代码  

1. // 创建一个Model的实例  
2. var m = new Backbone.Model();  
3.   
4. // 将监听函数绑定到m对象的all事件中  
5. m.on('all', function() {  
6.     alert('all');  
7. });  
8. // 将监听函数绑定到m对象的自定义事件show中  
9. m.on('show', function() {  
10.     alert('show title');  
11. });  
12. // 将另一个监听函数绑定到m对象的自定义事件show中  
13. m.on('show', function() {  
14.     alert('show content');  
15. });  
16. // 将监听函数绑定到m对象的自定义事件hide中  
17. m.on('hide', function() {  
18.     alert('hide');  
19. });  
20.   
21. // 触发m对象的show事件和hide事件  
22. m.trigger('show');  
23. m.trigger('hide');  

 

 

　　执行显示的结果分别为：

　　show title

　　show content

　　all

　　hide

　　all

　　在本例中，我们为m对象的all事件绑定了监听函数，all是Backbone中一个特殊的事件，它在当前对象触发任何事件之后，都会被自动触发。（你也可以通过trigger直接触发all事件）

　　你需要注意监听函数的调用顺序，all事件总会在其它事件中的监听函数都执行完毕之后触发，同一个事件中如果绑定了多个监听函数，那它们将按照函数绑定时的顺序依次调用。

　　在Backbone内部，会为每个对象添加一个_callbacks私有属性，用于记录该对象中绑定的事件和监听函数列表。Events类的on、off和trigger方法都围绕每个对象的_callbacks列表在操作。

　　（你最好能在每阅读一个章节时，同时浏览Backbone对应的源码，这能帮助你加深记忆和理解，请参考：http://yujianshenbing.iteye.com/blog/1731340）