Dispatch Custom Events: $dispatch
Explore how to dispatch custom browser events using AlpineJS $dispatch. Understand passing data with events, event bubbling limitations, listening at the window level, inter-component communication, and triggering x-model updates for dynamic web interactions.
We use the ＄dispatch magic property to dispatch custom browser events:
When we type into the input field, the custom log-me event (line 6) is dispatched. The @log-me listener then catches it and logs the input field’s value to the console.
Pass data to ＄dispatch
We can also pass data to the listener with the dispatched event. Then, the event object will have a property called .detail, which contains whatever data we passed. Let’s see an ...