事件委托

同样地，我们可以将绑定的事件都移除，并通过一个events 对象来代理，这个events对象包含事件类型和选择器到回调函数的映射。这和elements 对象非常类似，格式是这样的：

events: {events: {     "submit form": "submit"}

让我们继续，将它添加至我们的SearchView 控制器，和refreshElements() 类似，我们使用delegateEvents() 函数，当控制器实例化的时候调用它。这会解析控制器的events 对象，将它绑定至事件回调。在这个SearchView 例子中，我们希望视图的

提交的时候调用函数

search() ：var exports = this;jQuery(function($){
exports.SearchView = Controller.create({
// 所有事件名称、选择器和回调的映射
events: {
     "submit form": "search"
 },
init: function(){
// ...
     this.delegateEvents();
},
search: function(e){ /* ... */ },
// 私有
// 根据第1 个空格来分割
eventSplitter: /^(\w+)\s*(.*)$/,  
delegateEvents: function(){
    for (var key in this.events) {
        var methodName = this.events[key];
        var method = this.proxy(this[methodName]);
        var match = key.match(this.eventSplitter);
        var eventName = match[1], selector = match[2];
        添加少量上下文
        if (selector === ' ') {
               this.el.bind(eventName, method);
          } else {
               this.el.delegate(selector, eventName, method);
     }
}
}});

注意，这里在delegateEvents() 中使用到了delegate() 函数，包括bind() 函数。如果没有提供事件选择器，这个事件将会直接放在el 上。否则就将这个事件“委托”，在匹配选择器的子元素中触发了这个类型的事件时调用它。这种委托机制有一个优势，就是在含有大量事件监听的场景中，不必给每个元素都添加监听，因为当事件冒泡的时候会动态地触发相应的事件回调。我们可以将这个增强版的控制器添加至之前的Controller 库，这样在每个控制器中都能重用它们了。这个是最终的示例代码，你可以在这里找到所有的控制器库代码：

var exports = this;jQuery(function($){
exports.SearchView = Controller.create({
elements: {
    "input[type=search]": "searchInput",
    "form": "searchForm"
},
events: {
     "submit form": "search"
},
    init: function(){ /* ... */ },
    search: function(){
    alert("Searching: " + this.searchInput.val());
    return false;
    },
});
new SearchView({el: "#users"});