骨干网视图事件或冒泡

Question

我有一个父视图，其中包含400个子视图。 如果我在每个视图中注册2个事件，那么将有800个事件用于DOM。

我的问题是我应该在子视图中注册事件还是应该使用气泡事件在父级别捕获事件。

这是优化和有效的。

提前致谢

Answer 1

<div id="parent">
     <div id="child1" class="child"/>
     <div id="child2" class="child"/>
     <div id="child3" class="child"/>
     ....
     ....
     <div id="child400"/>
</div>

如果上面是结构，则我的父主干视图将类似于下面，显然我将在父视图中创建侦听器。 为什么我们需要在400个子视图中具有相同的侦听器功能？

ParentView = Backbone.View.extend({
    el: "#parent",

    events: {
        "click .child": "clickEventHandler"
    },

    clickEventHandler: function(event){
        //You can access child like this.
        var $target = $(event.currentTarget);
    }
});

Answer 2

您正在寻找的是事件委托 ，是的，它可以很好地扩展，而将侦听器的负载附加到单个元素上则没有。 以我的经验，在设置处理程序时，性能损失是最糟糕的。

关于SO的另一个答案也涉及性能问题，并链接到jsPerf上的此测试 （当前不可用，因为jsPerf已因大修而关闭）。

那么，可能更有用的是以下两个演示：使用Backbone生成1000个元素，一次使用事件委托 ，另一次不使用 。

从演示中可以看到，影响很大。 三个事件被设立在演示- mousedown ， mouseup ， click -和生成页面的时间在演示大致加倍没有事件委托。

另一方面，如果您查看源代码，则会发现使用委托时某些事情可能变得更加复杂。 将处理程序绑定到单个项目视图（ this.model.get( "number" ) ）时，访问模型数据很容易。 如果使用委派，则必须采用间接方式。 所以，一如既往， 有一个权衡。 但是，只要您仅关注性能，就没有。