事件与delegateEvents之间的区别？

我在阅读docs for Views，我对events和delegateEvents之间的区别感到困惑。它们在View对象上似乎都被称为events方法。事件与delegateEvents之间的区别？

令我困惑的部分是密钥应该在events散列内。

从文档：

delegateEvents([events])使用jQuery的on功能为视图内的DOM事件提供声明回调。如果 events散列未直接传递，请使用this.events作为源。事件写入格式{"event selector": "callback"}

但是从标准事件事件写入不同：

var InputView = Backbone.View.extend({ 
    tagName: 'input', 

    events: { 
    "keydown" : "keyAction", 
    },

那么如何都应该事件写？你能结合这两种语法吗？

来源

2016-12-06 Jwan622

delegateEvents是被调用来应用events视图属性的事件的视图上的函数。

省略selector会导致事件绑定到视图的根元素（this.el）。默认情况下，delegateEvents在视图的构造函数中调用了你，所以如果你有一个简单的events散列，你所有的DOM事件总是会被连接，你不必自己调用这个函数。

这是setElement function（line 1273）内部发生：

setElement: function(element) { 
    this.undelegateEvents(); 
    this._setElement(element); 
    this.delegateEvents(); 
    return this; 
},

所以语法是相同的，两者的语法著作。

var InputView = Backbone.View.extend({ 
    events: { 
    // keydown event from ".sub-element", which must be a child of the view's root 
    "keydown .sub-element" : "keyAction", 
    "keydown" : "keyAction", // keydown event from the root element 
    }, 
});

里面的delegateEvents功能，key（例如"keydown .sub-element"）使用正则表达式（line 1311）分开。

var match = key.match(delegateEventSplitter); 
this.delegate(match[1], match[2], _.bind(method, this));

正则表达式分裂从选择器（line 1227）事件：（line 1317）

// Cached regex to split keys for `delegate`. 
var delegateEventSplitter = /^(\S+)\s*(.*)$/;

而delegate功能：

// Add a single event listener to the view's element (or a child element 
// using `selector`). This only works for delegate-able events: not `focus`, 
// `blur`, and not `change`, `submit`, and `reset` in Internet Explorer. 
delegate: function(eventName, selector, listener) { 
    this.$el.on(eventName + '.delegateEvents' + this.cid, selector, listener); 
    return this; 
},

来源

2016-12-06 22:07:26

什么时候事件对象的键只有类似keydown的东西？ – Jwan622

@ Jwan622我更新了我的答案，并提供了更多细节。 –

@ Jwan622阅读所有'delegateEvents'文档，“忽略'selector'导致事件绑定到视图的根元素（'this.el'）。”部分尤其是相关的。 –

事件与delegateEvents之间的区别？

回答

相关问题