javascript - Best practice to avoid memory or performance issues related to binding a large number of DOM objects to a click event

Question

First of all, I am testing various approaches using Chrome Dev Tools but I don't consider myself 'expert' with JS in todays modern browsers so I'm looking for additional feedback to compliment my testing.

I have a page which will regularly have 600+ elements that need to handle click events. I can think of at least 3 fairly different ways to approach this but I'm thinking about page size, speed, JS memory issues, object count-related issues (in terms of both performance and stability).

1. Include onClick="foo(this);" for each of the elements and define the function in one of my included .js files. -- Larger page, function defined once, I would think a smaller memory footprint for the JS, but larger for the page as a whole.
2. Use jQuery and $(selector).click(foo(this)); - Smaller page, function defined once, I'd think a larger memory footprint for the JS but smaller page overall.
3. Use jQuery and $(selector).click(function(this) { }); - Smallest page, function defined once, but I expect this to be the most demanding in terms of memory (and I'm concerned I might hit some obscure issue with jQuery or JS as a whole) but conceptually the most elegant.

I must support just about every browser one might expect jQuery to run in. The number of items could increase even more (possibly by a factor of 4 or 5).

If there's another approach that would be better, I'd love to hear it. If anyone wants to educate me on any advantages/pitfalls of my 3 approaches, I'd really appreciate that too.

Answer 1

The most efficient way to bind a large number of similar elements to a single event is to make use of event bubbling. You attach a single event handler to a common parent object and then, in the single event handler, you examine which object the event originated in to see if the original object is an object you're monitoring for this event.

For attaching the event, it costs you only a single event handler and you can serve an infinite number of child objects from that one event handler.

There's a slight performance degradation at the run-time of each event (probably not noticeable) because the event has to bubble up to a parent before the event handler sees it and the event handler has to check if the source object is a desired target object or not. But, it's massively more efficient to install the one single event handler rather than installing thousands of individual event handlers.

Delegated event handling also has the advantage that it works well for dynamically created objects, even objects created after the event handler was installed - something that doesn't not work well for event handlers installed directly on the objects themselves (non-delegated event handlers).

In jQuery, you can use delegated event handling like this:

$(common parent selector).on('click', selector of target objects, function() {});

For example, HTML:

<div id="parent">
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
</div>

Code:

$("#parent").on('click', ".addButton", function(e) {
    // the value of `this` is set to the object that originated the event
    //     e.g. what was clicked on
});