Javascript 101: Events
An event is a signal that something has happened and is modeled after the observer pattern which allows loose coupling between the behavior and appearance of the page.
Events, after they occur, are propagated throughout the DOM for their listeners to respond to. The order in which these events are received on the page is described as the Event flow.
DOM Event Flow
The event flow specified by DOM Level 2 Events has three phases: the event capturing phase, at the target, and the event bubbling phase. Event capturing occurs first, providing the opportunity to intercept events if necessary.
In the DOM Level 2 Events specification event flow, the actual target (the <div> element) does not receive the event during the capturing phase. The diagram above depicts otherwise because Safari, Chrome, and Firefox fire an event during the capturing phase at the event target(and the example was done in chrome).
This means that the capturing phase which would have stopped at the parent of event target (<body> element) continues to the event target (<div> element) before the next phase from the event target begins(bubbling phase), which fires on the <div> to travel back up to the document.
The end result of this modification is that there are two opportunities to work with the event on the target.
Event Capturing
The theory of event capturing(aka event trickling) is that the least specific node should receive the event first and the most specific node should receive the event last. To use event capturing the third argument(useCapture in this case) of the addEventListener method is given the value true like so.
With event capturing, the click event is first received by the document and then continues down the DOM tree to the actual target of the event, the <div> element.
Event capturing is generally not used because of a lack of support in older browsers. The general advice is to use event bubbling freely while retaining event capturing for special circumstances.
Event Bubbling
Event bubbling is when an event is said to have started at the most specific element (the deepest possible point in the document tree) and then flows upward toward the least specific node (the document). To use event bubbling the third argument(useCapture in this case) of the addEventListener method is given the value false. But since false is its default value, we would ignore it like so.
When you click the div element the click event occurs in the following order: div — body — html — document. The click event goes up the DOM tree firing on each node along its way until it reaches the document object. (firefox, chrome, and safari continue till the window object) — crazy right? they always do extra 😂.
Event Delegation
Capturing and bubbling allow us to implement one of the most powerful event-handling patterns called event delegation. It is also possible to use the target property to cast a wide net for a specific type of event.
For example, if you have a node containing a long list of buttons like the above image, it may be more convenient to register a single click handler on the outer node(div in this case) and have it use the target property to figure out whether a button was clicked, rather than register individual handlers on all of the buttons.
More About Events
Stopping Event Propagation
At any point, an event handler can call the stopPropagation method on the event object to prevent handlers further up from receiving the event.
This can be useful when, for example, you have a button inside another clickable element and you don’t want clicks on the button to activate the outer element’s click behavior.
Prevent Default Event
Many events have a default action associated with them. A common example is the refresh action that occurs when you submit a form. For most types of events, the JavaScript event handlers are called before the default behavior takes place. If the handler doesn’t want this normal behavior to happen, typically because it has already taken care of handling the event, it can call the preventDefault method on the event object.
This can be used to implement your own keyboard shortcuts or context menu. It can also be used to obnoxiously interfere with the behavior that users expect.
Conclusion
Without events and listeners our programs though pretty would be nothing more than an expression of ideas and emotions, void of feedback. This is what makes events an interesting topic in Javascript as they enable us to get a sense of how the world feels about our apps via interaction. I hope you’ve learned a thing or two about how they work and how to take advantage of their propagation throughout your app. See ya 👋
