ng-repeat and event delegation

[Keyamoon]

Any event handler inside the ng-repeat loop should be binded to a parent element, for better performance.

Here's an example:

<ul>
    <li ng-repeat="item in items" ng-click="go(item)">item.caption</li>
</ul>

It would be awesome if angular could automatically recognize this pattern and bind the event to a parent element (ul for example).

[btford]

for better performance

I'm not convinced that this would yield better performance in practice. In your example, there would be extra work involved if you listen on <ul> to determine which <li> was actually clicked and evaluate the expression on that scope. I'd love to be proven wrong, though. Do you have some benchmarks that suggest that this is performance-critical?

[pkozlowski-opensource]

@btford +1 Talking about performance without measuring things and having hard data is a bit pointless. There are so many factors at play.

@Keyamoon did you do any performance analysis? I would be curious to see how such a change would affect performance (and under which circumstances).

[Keyamoon]

I always assumed event delegates must be faster and take less memory. I made some simple tests and it turns out my assumption was totally wrong! The performance of both event delegation and directly binded event handlers was almost exactly the same in my test.

Thanks for the quick response. I should have researched more before opening this issue.

[dosyfier]

Hi.
I was rather astonished when seeing this topic closed but not handled.
@btford : Why would there be extra work involved in determining which one of the

elements was clicked? So far as I know, when a click event occurs on an element, the root element of this event is wrapped into the "target" attribute of the event, and then this event is propagated step by step to all of the root element's parents, so that each of these parents can easily pick up the element which was actually clicked.
Still I don't have data to corroborate what I'm saying but, in theory, with using the event delegation pattern, you can mostly improve the memory consumption, because instead of registering / creating n event listeners functions (one per element observed), you just do this once and only once for the parent.
Am I wrong?

[Charuru]

isn't the evidence ample?
@btford
@pkozlowski-opensource
@dosyfier

http://jsperf.com/jquery-event-delegation/100

[ccamarat]

@Charuru That's a bad test; it only measures binding, or setup. Of course delegation will be faster to setup - there's fewer elements to bind to. This test measures the performance when the event is actually triggered.

[onlywei]

@ccamarat Is setup performance not important?

[lgalfaso]

@onlywei @Charuru The function that is defined at ngClick must be executed with the right scope. This is if the ngClick is registered at the parent element, then when running it will need to find the scope that was used and execute it in that context. This is, there are two options:

• Keep what we have now (even when that implies a higher initial cost)
• Move the ngClick to the parent (and pay the cost of scope lookup for every single click)

Given an element, looking for a scope has a high cost, then moving the event registration to the parent would imply that we would be moving an initial cost to a running cost. I think that when doing any form of comparison, then everything has to be taken into consideration.