Links
Comment on page

Working with Custom Events

Release 1.7.0 in June 2022 introduced support for Custom Events.
Custom Events can be used to define your own custom Triggers, and control when a Sidebar Panel mod refreshes.
PixieBrix uses the DOM Event API standard. Therefore, custom events can be used to communicate bi-directionally with the host page.

Emitting/Dispatching a Custom Event

To emit a custom event, use the Emit a Custom Event brick. The brick takes two inputs:
  • eventName: a unique name for the event. The name should be globally unique
  • data: an optional data payload
PixieBrix dispatches the event on the root document of the frame.

Running a Trigger on a Custom Event

To run a trigger on a Custom Event, choose “Custom Event” from the Trigger dropdown and configure the trigger:
  • Custom Event: the name of the event. Should match the eventName in your use of Emit a Custom Event (see Emitting/Dispatching a Custom Event above)
  • Element: an optional selector controlling the elements on which to listen for the event. Use when running triggers for events from the host page. The Emit a Custom Event brick emits events on the document itself.
If the event includes data, that data will be available to the Trigger mod bricks as @input.event
If the event includes data, that data will be available to the Trigger mod bricks as @input.event

Refreshing a Sidebar Panel on Custom Event

Custom Events can also be used to control Sidebar Panel updates. To configure a Sidebar Panel to update on a custom event, choose “Custom Event” from the Panel Refresh > Trigger dropdown.
Then, configure the event to listen for:
  • Custom Event: the name of the event. Should match the eventName in your use of Emit a Custom Event (see Emitting/Dispatching a Custom Event above)