Events
Before diving deep, let’s clear out the basics first. Everyone loves to click that button see that magic happen but deep down inside JavaScript that click is an event and similar to that when the user interacts with the page, their actions are captured as events.
In order to have a button listen to an event, you need to register a listener or handler (whatever term suits you the best). Let’s say we have a button click and we want to register an event on the button to measure how many times the button gets clicked. Here’s how we’ll do it.
In this example what we did is we took the button element with id using querySelector and attached an event to it using addEventListener
Event Propagation
Now that we know what event is and how to attach eventListener to an element. Let just see how it works and how many events get triggered when a button is clicked (might surprise a lot of you).
What do you think? On how many elements a click event gets triggered if I click on that button above?
Without a doubt, it’s going to be the button itself but it’s also going to be all the button’s ancestors and even the document and window objects.
Why is that? Let's just find out.
An event basically propagates in 3 phases:
Capture Phase: The event starts from the window, document and deep dives through all the ancestors of the target element.
Target Phase: The event finds its target element and gets triggered on which the user has interacted.
Bubble Phase: The event goes up the hierarchy in a similar fashion it dived during the capture phase until it reaches the document and window.
Event Bubbling
Event bubbling is the propagation of an event from its origin towards the root element. Which means if an event has occurred on a button then it will also be triggered by its parent and its parent’s parent and so on up until the HTML element.
Now let’s see event bubbling in action.
Now if you have interacted with an above pen, a few things you would have realized by looking at the console is.
When you click on the white part, nothing happens.
When clicked on the green, GrandParent event is triggered.
When clicked on the yellow, parent as well as GrandParentevent is triggered.
When clicked on blue, all three parents, GrandParent and child event is triggered.
Now you must have realized by now that all of the events whether it happens on some sideline button or on the button you want everyone to see, each will trigger an event on the element that is wrapping them up.
Event Delegation
The modern application relies heavily on events to provide interactive interfaces to the users. It’s really common to have a vast number of event handlers on the web page, and it is during these times event delegation can really shine and can create a difference.
You’ll be surprised by how many events can there be some simple looking sites.
A good example of event delegation would be building a colour palette and attaching an event listener to every colour as we want to do some operations on it. So one way to do it will be attaching an event listener to every colour element so when the user will click on it, the operations get done. Just as shown below.
While the approach we’ve adopted is viable, it’s not as optimized as it could be. Our palette has 150 colours and, as a result, we are attaching 150 listeners to handle all of them. Besides, if our component had a feature that allowed the user to add custom colours, we would need to add our listener to each new colour added to the palette.
But a better way would be as you might think is utilizing what we have learned earlier on and applying it here. To solve the problem mentioned in the above section, we will put together everything we have learned so far to make use of a technique called event delegation.
As every event gets bubbled up maybe we don’t need to attach every colour element to the event what we can do instead is attach that event on parent element so whenever a colour element gets clicked it bubbles up to parent element which then fires the function we wanted.
Conclusion
Knowing a simple event delegation concept in our example reduced from having 150 events attached to just one and these small things matter when application gets complex and makes a real difference in performance.
Now that you know this concept, you’ll be able to build apps that are complex, interactive and at the same time doesn’t compromise on performance.
Top comments (0)