JavaScript performance benchmark in handling events at parent for all child elements

Question

Handling events for several child elements in bubbling phase at parent node is common. However, I am not sure if there are any performance issues in it. For instance, Consider the following structure:

<div id="parent">
    <div>child1</div>
    <div>child2</div>
    <div>child3</div>
</div>

Now If i want to handle onclick on each of the childs, I can attach the handler to each child div or just a single handler to the parent div as the event is going to bubble up.

So If was curious what is the best practice? Are there any performance concerns in the two approaches.

Answer 1

If you have a big number of childs I would recommend you to go for Event Delegation.

By experience I can tell you that adding event handlers to a very large number of elements may give you performance issues, memory leaks and browser locks (primarily in IE).

Event delegation in those instances is a very simple, light and good alternative.