事件和委托事件之間的區別？

Question

我正在閱讀Views的文檔，並且對events和delegateEvents events之間的區別感到困惑。 它們似乎都被稱為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視圖屬性的events 。

省略selector會使事件綁定到視圖的根元素（ this.el ）。 默認情況下，為您在View的構造函數中調用了delegateEvents events ，因此，如果您有一個簡單的events哈希，則所有DOM事件將始終已連接，而您將不必自己調用此函數。

這發生在setElement函數內部（ 第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" ）（ 第1311行 ）。

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

用於從選擇器中分割事件的正則表達式（ 第1227行 ）：

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

和delegate函數（ 第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; },