Handle DOM Events Raised by Base Lightning Components

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.

This post includes links to additional resources that explain concepts like HTML event attributes, DOM on-event handlers, JavaScript event delegation, bubbling and capturing, and event handling in base Lightning components.

Note: You’ll need to know a little bit of JavaScript.