Event Handling and Bubbling
Understanding Events in JavaScript
Events in JavaScript
According to MDN, “[e]vents are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired.”¹ So, the event listener is placed on the page to wait for some user event (click a submit button) and then carry out the desired response to that event (submit the user’s form). The event essentially fires the trigger on whatever takes place next. Event listeners are similar to a pitcher on the mound, where the pitcher looks to the catcher for the signal on which pitch to throw next, and then carries out the signaled pitch.
Event Handling
In order for out webpages to be interactive, we have to set event listeners on whichever element inside the browser window document (DOM) we want to be responsive. There are a number of events available, such as clicking, hovering and mouseover. Each of these events will have a corresponding event handler which will run whatever code we want to execute in response to the user action. As Eloquent JavaScript tells us, it is important to remember that “each browser event handler is registered in a context…event listeners are called only when the event happens in the context of the object they are registers on.”² So what does this mean for nested elements where the event takes place inside a child element?
Enter..
Propagation
Eloquent JavaScript goes on to explain that “event[s] [are] said to propagate outward, from the node where it happened to that node’s parent node and on to the root of the document.” This behavior is called “bubbling” and is the default behavior of JavaScript.
Here, we have a simple HTML template for three buttons. We want to add an event that alerts us when buttonOne is clicked:
Nothing we haven’t seen before, right? — what about that third parameter in the addEventListener? That third parameter is the useCapture parameter and is passed as false by default. The useCapture is what allows the bubbling explained above to take place instead of the inverse, event capturing. Even though the default behavior of a JavaScript event is for the event to bubble up from the target element, behind the scenes, the event always starts at the root (outermost containing element). The click event in the above case starts at the document and travels down each containing element until reaching the target, buttonOne and then travels back up the chain to the document.
The capturing phase can be utilized by toggling that third parameter of the EventListener function to true. The capturing and bubbling phases also allow us to very rudely interrupt events before they can take place, or to have intermediate elements respond to the event once they do.
Event.stopPropagation()
If the event we create has any undesirable side effects on other elements of our page, we can employ the event.stopPropagation() function to stop the event from propagating up or down, depending on the phase (capturing or bubbling). As MDN reminds us, “[i]t does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed.”³
In the above code, our event will still take place on buttonOne, but the event will stop on the target and travel back up to the root.
Conclusion
The event phases of Bubbling and Capturing are foundational to understanding events in JavaScript. Keeping in mind that events always start at the root and travel down to the target and then back up to the root, while not always intuitive or apparent, will help us to write better event sequences and give us more control over how events interact on our webpages.