Events

All components trigger events that can be used to perform additional actions.

They can be used in three ways:

1. By Options

When creating an instance of a component, you can pass an on option, which takes an object with event handlers.

Also, in this method, you can use a general any handler, which will be called for all events.

Dialog.data("my-dialog", {
  on: {
    shown(instance, { trigger, event }) {
      // do something...
    },
    any(eventName, instance, { trigger, event }) {
      if (eventName === "shown") {
        // do something...
      }
    },
  },
});

2. On the Component Instance

After creating an instance of the component, you can add an event handler directly on the instance itself.

const dialog = Dialog.get("my-dialog");
dialog.on("shown", (instance, { trigger, event }) => {
  // do something...
});

3. Directly on the Element

After creating an instance of the component, you can add an event handler directly to the element itself.

By default, events that are listened to directly through an element have the prefix 'ui-{component}:'. This can be changed by the eventPrefix property.

const dialogElem = document.querySelector(".my-dialog");
dialogElem.addEventListener("ui-dialog:show", (e) => {
  const [instance, { trigger, event }] = e.detail;
  // do something...
});

Events dispach can be disabled by setting eventDispatch to false:

The any and breakpoint events are not generated on the element.

4. On the Document

This method is similar to the previous one, but the handler is added to the document. In this case, it will be called for all components.

If it is necessary to handle an event only for a specific component, you can check its id:

document.addEventListener("ui-dialog:show", (e) => {
  const [instance, { trigger, event }] = e.detail;
  if (instance.id === "my-dialog") {
    // do something...
  }
});

Events bubbling can be disabled by setting eventBubble to false: