主干视图的“事件”属性中的“加载”事件

Question

通常，我可以在 jQuery 中侦听的任何事件也可以在 Backbone 中侦听。换句话说，如果我有：

var MyView = Backbone.View.extend();
var view = new MyView();
view.$el.html('<button>');
var onClick = function() {
    alert('woot!');
};

我想在onClick点击按钮时触发，我可以这样做：

$('button').on('click', onClick);

但是因为我使用的是 Backbone，所以我会这样做：

var MyView = Backbone.View.extend({
    events: {click: onClick}
});

但是，这不适load用于 iframe 事件，所以如果我有：

view.$el.html('<iframe src="www.stackoverflow.com"></iframe>');
var onLoad = function() {
    alert('woot!');
};

我可以：

$('iframe').on('load', onLoad);

但我不能这样做：

events: {load: onLoad}

我的问题分为两部分：1）为什么这不起作用，2）有什么办法可以解决它，但仍然使用 Backboneevents而不是原始 JQuery？

Answer 1

中的事件events使用delegateEvents和 使用 jQuery 的委托形式附加on。但on委托只适用于冒泡的事件：

在所有浏览器中load，scroll、 和error事件（例如，在<img>元素上）不会冒泡。[...] 此类事件不支持与委托一起使用，但当事件处理程序直接附加到生成事件的元素时，可以使用它们。

因此load，events对象中的事件不会为您做任何事情，因为load它不会冒泡 DOM，因此它不适用于事件委托。

您只能手动执行（可能this.$('iframe').on用于将其正确隔离到iframe视图中的 s el）或为<iframe>. 后者将起作用，因为如果您不在 中包含选择器events：

events: {
    load: 'handler'
}

然后事件直接绑定到视图的el. 如果你有这样的看法：

var V = Backbone.View.extend({
    tagName: 'iframe',
    attributes: {
        src: 'http://example.com'
    },
    events: {
        load: 'loaded'
    },
    loaded: function() {
        // This should get called.
    }
});

那么elwill<iframe src="http://example.com"></iframe>和loadevent 将直接绑定到 that <iframe>。这可能会或可能不会起作用，具体取决于您究竟需要事件处理程序做什么。