jQuery Event Delegation Improves Performance

In this post, I will share a simple tip of how you can improve jQuery performance by using Event Delegation to add event listeners to the parent element, and in turn, check for events on its children.

First let’s take an example where there are a bunch of ‘li’ elements inside an unordered list. We have to use jQuery to provide a click event and perform an action, when the user clicks on a li element.

For this example, we are converting the li into hyperlinks (not by appearance but by functionality)

jquery convert to hyperlink

The code shows a typical way of adding a click event to every ‘li’ element – there are three event listeners. However there’s a better way to do this using the jQuery delegate function and reducing the number of event listeners. Here’s how.

<script type="text/javascript">
    $(function () {
        $("ul").delegate("li", "click", function () {
            var loc = $.trim($(this).text());
            window.location = "http://" + loc;
        });
    });
</script>
Using the delegate function, we have added only one event listener on the parent element (‘ul’ in this case), and checking events on its children (‘li’ in this case). This tells the the ‘ul’ element to watch for click events on all ‘li’ elements, and if a click occurs, run the function.

The same event listener will be applicable to all ‘li’ elements that are added dynamically, i.e. at run time.
See a Live Demo


Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

5 comments:

Anonymous said...

It might be a good idea to put the actual URL into a data attribute on the LI tag rather than relying on the list item's text.
- Gregg

Anonymous said...

Thank you Suprotim Agarwal for this useful performance trick.

@Gregg can you give example of what you are suggesting. Will your suggestion improve performance futher?

hqrts said...

Nice advice i'll take it into consideration for my future developments

Anonymous said...

Funny, no insight to how event's are handled by the browsers. Doesn't cover bubbling at all.

Anonymous said...

Ugh. While I completely believe the performance improvement claim - I hate it when it is thrown around without any benchmark to back it up. How big of an improvement is it? how does the number of children LI elements impact the performance delta? etc.

Just the same, I think there are other benefits in code readability and maintenance as well. Thanks for the reminder.