Importance of JavaScript Event Delegation

Fig. (i) Image source: Google

Each website is mainly composed of two components. One is the frontend and the other is the backend. Backend logic are generally stored on high-end servers which have got many cores and 10–20 GB of RAM and these servers handle millions of data and traffic every day. Primarily, developers focus more to reduce the server response time and tend to optimize these servers by configuring caching, minifying scripts, tuning the database, etc. to attain more efficiency. However, they forget that it is equally important to optimize the frontend too.

The frontend logic are executed at the client-side and these clients have a really low-end device(like mobile, laptop, PC) as compared to servers. In comparison, these devices have less RAM with a lot of other processes already running in the background. In that case, you don’t want your users to feel that your product is lagging because of some non-optimized code in JavaScript or anywhere else.

Fig. (ii) Image source: Google

JavaScript

Most of the websites use JavaScript or their extensions in terms of library or frameworks and they follow quite a similar approach and concept of DOM manipulation and event management. Any sort of action on a web page represents an event on the element but the way to handle these events may vary. There are 3 phases in which an event propagates:

1. Event capturing: reaching to the target element which initiated the event
2. Target phase: at the target element and can be accessed using the event.target
3. Event bubbling: moving up to the element where the handler is attached

These 3 phases depict that an event propagates through all the descendants (of the element on which event listener is attached), whether those are existed or going to be added in runtime.

Event Delegation

The default behavior of the event propagation i.e Event bubbling(bottom-up model) can be utilized to design one highly efficient strategy called Event delegation. Event Delegation is a strategy (top-down model) to optimize the performance of a web app while responding to the events. The idea is that if we have a lot of elements handled in a similar way, we put a single handler on their common ancestor instead of assigning a handler to each of them.

Implementing Event Delegation

a) Dynamic case: Consider a scenario where we are expected to add list items dynamically, for instance in a ‘todo’ list. After completing each task we are required to delete the respective list item but how we will achieve this since we haven’t attached any event to the newly created items? Here, event delegation comes to the rescue.

Refer to the below boilerplate of a ‘todo’ list:

Fig. (iii) Boilerplate code

To delete the respective list item we are required to attach an event handler to it but since these items are created dynamically we have to adopt the strategy of Event delegation.

Fig. (iv) Implementing Event Delegation in runtime

b) Static case: What if in the aforementioned boilerplate, instead of the dynamically created list items, there are dozens of hard-coded list items and we are expected to display the text in the console on clicking the respective list? How can we implement event delegation in such a scenario?

Fig. (v) Without using Event Delegation (Static)

In the above JavaScript code i.e Fig. (v), each event on the targeted list item is handled separately causing a lot of redundant code and bad coding practice. Let’s see how Event Delegation makes it more intuitive, readable, and efficient.

Fig. (vi) Using Event Delegation (Dynamic)

Here, instead of adding an event listener to multiple list items, a single listener is added to the closest common ancestor. But why to the closest one?

As discussed earlier, the event propagates in 3 phases and covers all the descendants so it would be efficient and considered as a good coding practice to optimize the event propagation by minimizing the unnecessary movement of an event.

If you’re a programmer, try to optimise everything.