骨干網視圖事件或冒泡

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" ) ）時，訪問模型數據很容易。 如果使用委派，則必須采用間接方式。 所以，一如既往， 有一個權衡。 但是，只要您僅關注性能，就沒有。