Design Pattern for Handling Browser Events Raised by Out-of-the-Box Components Using HTML Element Wrappers
We know that base Lightning Components apply Salesforce Lightning Design System (SLDS) styling to HTML elements that are output when the components render.
We also know that base components can raise a number of component events.
Did you know that you can handle browser events that are raised by the rendered HTML itself?
I wrote a post explaining how to handle DOM events that are not explicitly supported by base Lightning component event attributes.
My solution is to simply wrap the component in a containing HTML element – typically a
<div> tag – and leverage a concept called “bubbling” to manage DOM event propagation.
Whie the events raised by base Lightning Components are not DOM events – they are component events raised by the Lightning Component Framework – they follow a similar pattern to DOM events in that the component events “bubble up” through the component hierarchy similarly to the way in which DOM events propagate through the node tree.
This solution for handling DOM events raised by base Lightning Components is a simple and elegant pattern that can be applied to situations requiring a more robust set of events than those raised by base Lightning components.
Philippe Ozil delivers a comprehensive review of Lightning Component events, an underpinning feature of the Lightning Component Framework architecture.
Philippe provides detailed explanations of event propagation, starting with DOM event propagation then comparing and contrasting with Lightning Component event propagation.
In this article you will learn about the capture and bubble phases of Lightning Component event propagation, as well as how to stop, pause and resume event propagation.