event

Callable

• event(): EventMeta<new (type: string, eventInitDict?: CustomEventInit<undefined>) => CustomEvent<undefined>>
• event<T>(): EventMeta<_CustomEventContructor<T>>
• event<E>(eventConstructor: E): EventMeta<E>

---

• Defines an event in your component metadata that can be dispatched by the component.

  Make sure your event name starts with on and to avoid conflicts with native HTMLElement events. The event name will be converted to kebab-case.

  You can dispatch events either using HTMLElement.dispatchEvent or by calling the event emitter function in this.events inside the render function of a component.

  @example

  class App extends Component("x-app", {
    onSomethingHappen: event<string>(),
    // Event name will be `something-happen`
  }) {
    render() {
      // …
      this.events.onSomethingHappen({ detail: "Something happened! "});
    }
  }
  
  const app = new App();
  app.addEventListener("something-happen", (evt) => {
    // `evt` is `CustomEvent<string>`
    console.log(evt.detail);
  });

  You can also provide a custom event constructor:

  @example

  class App extends Component("x-app", {
    onSomethingClick: event(() => MouseEvent),
  }) {
    render() {
      return (
        <button onclick={evt => this.events.onSomethingClick(evt)}>
          Click me!
        </button>
      );
    }
  }