jQuery event delegation, and one more reason why you should be using it more

I’ve had a somewhat extensive experience with jQuery so far. I’ve had the pleasure of reviewing peer jQuery code, mentoring potential web devs, teaching in classroom settings, and bashing heads over on StackOverflow, but one thing I’ve noticed all this time is just how hard it is to make developers do one simple thing in jQuery.

And when I say hard, I mean hard. Convincing jQuery developers to use delegate more in their code has got to be one of the more resilient challenges for someone teaching the jQuery craft.

The problem with the learning part of this (what I think at least) is that for devs coming into jQuery, you see bind() and then you see live(), and immediately think that those’re all you’ll need for working with events. Think about it: how long did it take you to know about delegate() from the time you learned about live()?

There’s a lot of argument for delegate out in the interwebs, and I’ve chucked my share in as well somewhat, but let me offer one more compelling reason to use delegate.

Buff your events with a bit more shine

It’s easy to get lost when working with events in jQuery, even for just the somewhat harmless reason that everything is just so easy to do. For example, consider this:

<ul>
    <li>This</li>
    <li>is</li>
    <li>a</li>
    <li>simple</li>
    <li>list</li>
</ul>

jQuery(function($) {
    // we're assigning an event handler to each li element
    $('li').on('click', function () {
        $(this).toggleClass('selected');
    });
});

One would write this code and probably won’t give it a second look. After all, we’re writing our jQuery in pretty much a good form.

What most don’t realize, however, is that to some degree, this comes with it’s inefficiencies, particularly in the fact that binding an event listener in this way automagically attaches a distinct instance of the handler function to each distinct element in the jQuery wrapped set. That means that, for this particular example, we’re creating five references to a function, because each of the li elements gets its own piece of the pie.

If you’re interested in optimizing your code further, you could do this instead:

jQuery(function($) {
     // we're delegating the event handler here
     $('ul').on('click', 'li', function () {
         $(this).toggleClass('selected');
     });
});

What we’re doing here instead is that we’re assigning one (just one!) reference of the function to the ul element, and we’re telling it to fire it whenever a click occurs in any li inside it (hence, delegating).

Now, at first glance, that may not be much, but you’ll be surprised at how fast the performance hits can add up, to the point that there are arguments that delegate may actually be even more efficient to use in a majority of applications than bind.

It’s a pretty simple thing to do in your jQuery code (now even more so because of the unified on() function), so do keep this in mind whenever you’re writing to optimize your jQuery performance.