BOUI Events

Events are fundamental to creating interactive web applications because they allow developers to set up "listeners" that respond whenever these actions occur.

Boui Events are a specialized form of JavaScript events used throughout the library to handle various actions and states. These events fall into three main categories:

  1. Lifecycle Events: Fired at key points in Boui’s lifecycle, such as after components, styles, or the entire application have fully loaded.
  2. Component Events: Fired by specific components in response to user interactions or state changes, such as refreshing a table’s data or handling a button click.
  3. Custom Events: User-defined events that can be triggered with the dispatch method, enabling tailored event-driven behaviors.

Lifecycle BOUI Events

Boui Events provide structured hooks into the initialization and loading processes of your application. These events are:
  • initialized.boui.components Fired once all JavaScript-based components have been fully initialized.
  • initialized.boui.layout Fired after the page layout has been set up. The specific initialization process depends on the layout type, and the event provides the corresponding HTMLElement for further customization.
  • initialized.boui.actions Fired when custom actions have completed their initialization.
  • initialized.boui.styles Fired once all component styles have been fully loaded.
  • loaded.boui.app Fired after the entire application has completed initialization, ensuring that all preceding events have been triggered.

Components Events

Each Boui component defines its own specific set of events. While you can find detailed lists on the individual component documentation pages, the general naming pattern for these events is componentName.boui.componentAction.

For example, when a modal is displayed, the corresponding event is ui-modal.boui.shown.

Custom Events

BOUI includes a dispatch method that allows you to trigger custom events and pass any data you need. For example, you can dispatch a custom event like this:

javascript

Important Note: Do not manually trigger built-in lifecycle or component events, as this can lead to unexpected behavior.