Published: 2017/06/27 Reading Time: 2 minutes

What Is Event Delegation in JavaScript?

Event delegation is a design pattern that says if several common elements in the DOM utilize the same event handler (the action taken when an event is triggered), then we can attach or delegate that event handler to a common element ancestor, instead of each individual element on the page. You might have heard of event bubbling and event capturing before as well, but they should not be confused with delegation. Using event delegation allows us to keep our code lean and less cluttered, thereby improving our website's performance. To really understand even delegation, however, we need to better understand how the event propagation happens. This is often referred to as bubbling.

Event Bubbling

Event bubbling (or "event propagation") is when an event "bubbles" up the DOM tree, all the way to the document node. For example, click events bubble. So when you an event is dispatched from an anchor tag, it bubbles up the DOM, like this: Event propagation.Depending on your list size, though, there could be hundreds of <a> tags. Instead of adding an event listener to each of those <a> tags, you can add an event listener to just the parent item, and intercept the child click events as they bubble up the DOM tree. Let's look at this another way. A click event bubbles for very good reason. Consider this version of the above diagram: Event Delegation in JavaScript: event propagation diagram.In this version, you can more accurately see what is happening when you click the <a> tag. Because the DOM is a series of nested nodes, you are not only clicking a but each directly related parent in the DOM tree! Therefore, the JavaScript engine propagates that event all the way to the top of the document.

Event Delegation in JavaScript

We can intercept the click events from child elements by adding an event listener further up the DOM tree. Each event comes with an object full of useful information, such as the element the event was triggered on. This is called the event target. So, event delegation in our above scenario would be something like adding an event listener to the <ul> element that will catch any events bubbling up from children <a> tags. It would look like this:

const el = document.querySelector('ul');
el.addEventListener('click', (event) => {
    if (event.target === 'a') {
        // Do something.
    }
});

In jQuery this is accomplished using a specific API, and you've probably seen it before. It looks like this:

$('ul').on('click', 'a', () => {
    // Do something.
});

This minimizes the amount of event handlers our application has to store in memory, therefore improving performance. Be careful though. Not all events bubble, like blur or focus. Those will only be triggered on the target element. That's it! Event delegation might sound scary, but it's actually pretty straight forward. For a full understanding of the Event Web API, check out the Mozilla Documentation.