Question

I used to assign an individual event handler to each element of a given class at the time of its creation by AJAX, like so:

$('#newId').on('click', function (e) {...

I’ve changed to have one handler for the class that applies to all elements, like this:

$('#container').on('click', '.myClass', function (e) {...

I’ve been wondering about how exactly this works when the handler is fired, and what the performance implications might be. More specifically,…

How exactly does the element find the class handler? Is this slower than having one handler per element? And is there really only one event handler for the class, or does it get reproduced somehow for each element in the class?

Answer 1

As mentioned in a comment, there are benefits and drawbacks to each approach.

Event delegation is usually good when you have a container with child elements coming and going. Think of a large unordered list with edit/delete buttons. When a delete button is clicked, you’ll more than likely be deleting it’s parent li. Without event delegation, you’d be responsible for unbinding any event handlers bound on those elements.

Event delegation uses the event bubbling properties of the DOM. When the click event is triggered on a child of #container, that event will then bubble up the node tree searching for handlers for the event along the way. The event target is then tested to see if it matches a selector. If so, your bound click handler is called. Without jQuery, this might look like…

function myclass_click_handler() {
    // an element with myClass has been called
}

document.getElementById('container').addEventListener('click', function(e) {
    if (e.target.className.indexOf('myClass') > -1) {
        myclass_click_handler();
    }
});

One of the drawbacks of event delegation is that it doesn’t work for all events. From a performance perspective, it can actually improve performance because there can be less of a chance for memory leaks.

When assigning a callback directly to elements based on class, each element will get a reference to your callback function. If you needed to then remove any number of those elements, you’d need to unbind the event handlers for those elements. jQuery helps out with this when you use the remove() method by removing bound event handlers.

Hope this helps!