Basics of Event Bubbling
Even if you’re relatively new to HTML and Javascript, you’ve likely played around with event handlers. However, you may not be familiar with some event behavior. Event bubbling is what we call the process in which elements associated with an event are handled. In essence, the order of operations for an event.
Basically, event bubbling describes how an event will trigger on a target element, and then on that element’s parent, and the next parent, and so on all the way up to the main document or window.
Take a click event for example. If you click on an element, that element will be the target of your click event. It will have the first chance to execute the callback attached to your event handler. After the callback function is run, the event will “bubble” up to the parent. If that parent has an event handler for your click event, it will run that callback function next. This event will continue to bubble, upwards, until it can go no farther. This is very handy feature of events, for quite a few different reason.
One of the main ways this helps us, is with a process called delegation. Imagine we have multiple clickable elements inside of a single container element. If you wanted each item to be clickable, your instinct might be to put an event handler on each individual element. This could get messy pretty quickly. But you’ll only have to write one event handler if you put the handler on the container holding all those elements. Let’s say an image inside the container is clicked. The image becomes the target, and it is the first place checked for an event handler. Since there is none there, the event propagates up to the parent, which will then handle the event. Since the event.target is still the image you clicked on, you’ll still have access to the image from the event handler attached to the container! Then, you can just make a switch statement to handle each individual element in the container.
You can also stop the bubbling up if you desire. When you call event.stopPropagation(), the event will no longer move up to any parent elements. It will, however, still run ALL event handlers attached to the current element. To stop all events on parent elements AND the current element, use event.stopImmediatePropagation(). Just keep in mind, this may have some unintended consequences. Let’s say you have some analytic software that tracks where customers are clicking on your page, attached to the document itself. If a clickable element on your page stops propagation upwards, the event will never make it all the way up to the document element, and you will never know you’re customers have been clicking there!
Keep in mind there are also some events that are specific to a single element that don’t bubble, such as focus, blur, load, unload, change, reset, scroll, etc. This is also a very basic overview of the bubbling process , and I encourage you to check out more in depth resources as well!
Bubbling can help keep your code concise, dry, and improve readability. It is also an important concept to know about, so when you accidentally start firing off that unrelated event handler, you’ll know what to do!
Resources:
