Custom Events#

Demo#

Explanation#

<div data-signals="{eventCount:0,eventDetails:''}">
  <div id="foo" data-on-myevent="eventCount.value++; eventDetails.value=evt.detail">
    <div>Event count: <span data-text="eventCount.value">EventCount</span></div>
    <div>
      Last Event Details: <span data-text="eventDetails.value">EventTime</span>
    </div>
  </div>
  <script>
    const foo = document.getElementById("foo");
    setInterval(() => {
      foo.dispatchEvent(
        new CustomEvent("myevent", {
          bubbles: true,
          cancelable: true,
          detail: JSON.stringify({
            eventTime: new Date().toLocaleTimeString(),
          }),
        })
      );
    }, 1000);
  </script>
</div>

Datastar data-on-* plugin can listen to any event, including custom events. In this example, we are listening to a custom event myevent on the foo element. When the event is triggered, the event details are signalsd in the eventDetails signals and the eventCount signals is incremented. The event is triggered every second using setInterval in the script tag.

This is primarily used when interacting with Web Components or other custom elements that emit custom events.

Note: There is an extra variable evt available in the event handler that contains the event object. This can be used to access the event details like evt.detail in this example.