Lightning Event Handling

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.

Lightning Component Event Deep-Dive

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.