Question

我正在阅读docs for Views，我对events和delegateEvents之间的差异感到困惑。它们似乎都被称为View对象上的events方法。

令我感到困惑的部分是密钥应该在events哈希内部。

来自文档：

delegateEvents([events])使用jQuery的on函数为视图中的DOM事件提供声明性回调。如果 events哈希不直接传递，使用this.events作为源。事件以{"event selector": "callback"}
格式编写

但标准事件的事件编写方式不同：

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

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

那么事件应该怎么写？你能结合两种语法吗？

Answer 1

delegateEvents是视图上的函数，用于应用events视图属性中的事件。

省略selector会导致事件绑定到视图的根元素（this.el）。默认情况下，在View的构造函数中调用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函数中，使用正则表达式（line 1311）拆分key（例如"keydown .sub-element"）。

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

将事件从选择器（line 1227）拆分的正则表达式：

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

delegate函数（line 1317）：

// 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;
},

事件和delegateEvents之间的区别？

1 个答案: