这是一个典型的通过jQuery绑定DOM事件的例子，如果你正在开发或曾经开发过一些复杂的应用，你可能尝试过通过某种方式将这些代码更好的组织起来，以便使它们看起来结构更加清晰，更易维护。
Backbone的视图对象为我们提供了事件的自动绑定机制，用于更好地维护DOM和事件间的关系，来看看下面的例子：
<p>
<input type="button" value="Create" />
<input type="button" value="Read" />
<input type="button" value="Update" />
<input type="button" value="Delete" />
</p>
<script type="text/javascript">
var MyView = Backbone.View.extend({
el : '#view',
events : {
'click #create' : 'createData',
'click #read' : 'readData',
'click #update' : 'updateData',
'click #delete' : 'deleteData'
},
createData : function() {
// todo
},
readData : function() {
// todo
},
updateData : function() {
// todo
},
deleteData : function() {
// todo
}
});
var view = new MyView();
</script>
在这个例子中，我们将4个按钮放在一个id为view的标签中，并将这个标签与视图类MyView进行了关联。
在定义视图类时，我们声明了一个events属性，它表示视图中的用户事件列表，描述方式如下：
事件名称 选择器 : 事件处理函数
事件名称可以是DOM对象支持的任何事件，选择器可以是jQuery或Zepto支持的任意选择器字符串（包括标签选择器、类选择器、id选择器等），而事件处理函数应该是已经定义在视图类本身的方法名称。视图对象会自动解析events列表中的描述，即使用jQuery或Zepto获取选择器描述的DOM对象，并将事件处理函数绑定到事件名称中。这些操作都会在视图类被实例化时自动完成，我们可以更关心视图类本身的结构，而不是刻意地去考虑如何绑定事件。
你可能在担心另外一个问题：如果视图的DOM结构是动态生成的，Backbone是否提供了相应的方法用于动态绑定和解除事件？
其实你并不需要关心这个问题，因为events中的事件是通过delegate()方法绑定到视图对象的el元素上，而并非是选择器所描述的元素。因此视图内的结构无论如何变化，events中的事件都是有效的。
（如果你对jQuery比较熟悉，可能了解它所提供的delegate()方法。该方法实际上将事件绑定在父层元素，然后在事件冒泡过程中，通过检查目标子元素来触发事件。）
视图对象通过delegate()方法绑定事件，意味着我们不需要关心视图结构变化对事件产生的影响，同时也说明events中选择器所对应的元素必须处于视图的el元素之内，否则绑定的事件是无法生效的。
尽管如此，有些情况下可能我们仍然需要手动绑定和解除事件，视图对象提供了delegateEvents()和undelegateEvents()方法用于动态绑定和解除events事件列表，你可以通过查看API文档来了解它们。
渲染视图和数据
视图主要用于界面事件的绑定和数据渲染，然而视图对象仅仅提供了一个和渲染相关的方法render()，并且它是一个没有任何逻辑、也没有任何地方引用到的空方法，我们需要重载它来实现自己的渲染逻辑。
视图中可能包含许多界面逻辑，这里建议所有的视图子类都重载render()方法，并将它作为最终渲染的入口方法。在团队开发中，严格按照规范编码可以帮助别人更好地理解和维护你的代码。
您可能感兴趣的文章: