Cuttlefish Docs
  • English

    • spz-event

    Supported layouts: logic

    When to Use

    • When you need to listen for global events and call the target element's method after the event is triggered.
    • When you need to listen for the window's message event, after which the component emits a message event.

    Code Demonstration

    Basic Usage

    Calls the specified method of the target element when the listened event is triggered.

    <spz-event
  event-name="dj.addToCart"
  target-id="cart"
  target-api="render"
  layout="logic"
></spz-event>

    Listen to window

    Listens to the window element, and when its message event is triggered, the component automatically triggers the message event.

    <spz-event
  event-name="message"
  observer-id="window"
  @message="..."
  layout="logic"
></spz-event>

    Properties

    Property NameDescriptionTypeDefault ValueRequired
    event-nameThe name of the event to listen for, use ; to separate multiple eventsstring-Yes
    target-idThe id of the target element, calls the method specified in target-api when the listened event is triggeredstring-No
    target-apiSpecifies the method to call on the target elementstringrenderNo
    observer-idThe id of the element to observe, if configured, the event listener binding will wait until the element can be found on the page before bindingstring | window object-No
    delayDelays the call to the target element's method, in millisecondsnumber0No

    Events

    message

    When an element meets the conditions event-name="message" and observer-id="window" and the window's message event is triggered, the component will automatically trigger this event.

    • The data of the event object is the native event.data listened to.

    AI Summary (LLM Ready)

    • Component ID: spz-event
    • One-line purpose: Listens for events and calls the target element's method when the event is triggered.
    • Detected attribute rows: 0
    • Detected method subsections: 0
    • Detected event subsections: 1
    • Top attribute names: none (needs manual completion)
    • Top method names: none (needs manual completion)
    • Top event names: message
    • Reading order: start from usage/examples, then verify attributes, methods, and events.
    • Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/