0

I have a parent view which contains let say 400 child views. If I register 2 events per view that will be 800 events which DOM will be lsitening for.

My question is should I register events in child view or should I use bubble events to capture the event at parent level.

Which is optimize and efficent.

Thanks in advance

Shakeeb Ahmed
  • 1,778
  • 1
  • 21
  • 37
  • 2
    Measure? Why ask for opinion if you can have facts. Or you expect someone else does the work? – Mjh Aug 10 '16 at 16:05
  • @Mjh I asked for second opinion. I want to ask is does it hurt the site performance if 400 child have 400 events or 400 child have 1 event at parent level. – Shakeeb Ahmed Aug 10 '16 at 18:29
  • 1
    Measure. Don't ask for second opinion if you can see it for yourself. Don't be lazy. Also, there's no programming problem here. – N.B. Aug 10 '16 at 20:07
  • The thing is I am not an expert JavaScript dveloper and I saw this on basecamp how they minimize page load time by reducing number of events. – Shakeeb Ahmed Aug 10 '16 at 23:22

2 Answers2

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

If above is the structure, my parent backbone view will be like below and obviously i'll create listener at my parent view. Why should we need to have same listener function at 400 child views?

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

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

    clickEventHandler: function(event){
        //You can access child like this.
        var $target = $(event.currentTarget);
    }
});
user10
  • 5,186
  • 8
  • 43
  • 64
  • hi @user10 thats exactly my point I want to ask what it optimized and perfect for this situation. and one morething I like to add how to access the model from child view... – Shakeeb Ahmed Aug 10 '16 at 18:27
  • It is easier one. You can pass it while you initialize your child view and you can access in your child view like this.options.paramName. See this http://stackoverflow.com/questions/7803138/backbone-js-how-to-pass-parameters-to-a-view – user10 Aug 11 '16 at 03:24
1

What you are looking for is called event delegation, and yes, it scales well, while attaching loads of listeners to individual elements doesn't. In my experience, you take the worst part of the performance hit when you set up the handlers.

Another answer on SO deals with the performance implications, too, and links to this test on jsPerf (currently unavailable because jsPerf is closed down for an overhaul).

Perhaps more helpful, then, are these two demos of mine: Generating 1000 elements with Backbone, one time with event delegation, another time without.

As you can see from the demo, the impact is significant. Three events are set up in the demos – mousedown, mouseup, click – and the time to generate the page roughly doubles in the demo without event delegation.

On the other hand, if you look at the source code, you will see that some things can become a bit more complicated when you use delegation. It is easy to access model data when you bind the handler to an individual item view (this.model.get( "number" )). If you use delegation, you have to employ indirect ways. So, as always, there is a trade-off. As long as you look at performance only, though, there isn't.

Community
  • 1
  • 1
hashchange
  • 7,029
  • 1
  • 45
  • 41
  • it was a great and detailed answer I am looking for. And also I like to add here is we can have a view repository where every created view can be stored and we can get from there and have model easily thats what I am doing at the moment. – Shakeeb Ahmed Aug 26 '16 at 21:24
  • Sounds interesting. As a gut reaction, though, I would be wary of using a repository: it introduces global state through the back door, which is bad for testability, and it may introduce memory leaks if not managed correctly. Perhaps it is safer e.g. to store the model ID (or `cid`) as a data attribute on the DOM element of each item view, then keep a reference to the collection in the list view and retrieve the model with `view.collection.get( modelId )`. Just a thought. – hashchange Aug 27 '16 at 10:37
  • Yes exactly, I am doing this in the same way the DOM id is same as view id and then access it to get model or delete the view. – Shakeeb Ahmed Aug 28 '16 at 16:21