Event Capturing, Event Bubbling and Event Delegation
- Bubbling and Capturing are behaviours, a way of propagating events to multiple handlers
- Event propagation is the blanket term used for both event bubbling and event capturing. It is the process of calling all the listeners for the given event type.
- Bubbling, capturing and delegation are not browser features, they’re all models of dealing with events
Event propagation is the process of calling all the listeners for the given event type. It is bi-directional, it first travels all the way down from the
window to the
event.target (capturing, i.e. moving down) and then travels back up (bubbling, i.e. going up)
Events travel?! In event bubbling, the event keeps travelling until it gets to the top most element in the tree. Events rise up like bubbles through the DOM tree
What bubbling allows us to do is listen for events on ancestor elements, for example, if we set a click handler on the body, our callback will trigger whenever any of its children are clicked. link
You don’t need to worry much about capturing. It was standardized because of Netscape, and Netscape is dead.
Bubbling vs. Capturing
Bubbling is a bottom-to-top model (remember, bubbles go up), and Capturing is a top-to-bottom model. Since they’re both supported by the
addEventListener, you can work either way. The event first makes it way downwards (capturing) and then moves back upwards (bubbling)
The event first travels down the element nodes and (assuming the ) travels back up
<body> <header> <nav> <ul> <li><a>Link</a></li> </ul> </nav> </header> </body>
In the structure above, a click on the
<a> will not only generate a
click event for the link, but for the the parent list item, the , all the way up to the
window object. This is event bubbling, you are moving your way up in events, like a bubble
Event delegation is not a browser feature, but a popular technique built into libraries like jQuery link
Event delegation is a way of handling events. It is not the same as event bubbling.
event.targetis where the event actually occurred
event.currentTargetis where the event is currently being handled
Event delegation is the technique of attaching event handlers not to the elements you actually want to read out events from, but to a higher-level element. link
Why event delegation?
Event listeners are a potential cause of memory leaks and performance degradation. The more you have, the greater the risk
Because you can take care of multiple events in one function instead of adding a function for each event. For example, you have a navigation menu that opens a different slide-out panel for each link. Let’s say you have ten links in the menu, and you are listening to the
clickevent on each.
Now, if you don’t use event delegation, you’ll add ten event listener functions to cater to each.
In event delegation, event listener is added to an enclosing element instead of the actual element. For example, let’s say your navigation menu is a
ul that contains ten
li with links inside each list item. You’d add the event listener to the
ul that encloses all the list items on which you want to actually want to run handlers.
Using event delegation, we’d add a single event listener to an enclosing element ()
With event delegation, we can add an event listener to a containing element and then use
event.target to determine if an element inside the container was targetted