Custom Events and Event Modifiers with x-on

Handle custom events

AlpineJS also supports handling custom events like native DOM events. It means we can dispatch an event and have AlpineJS listen for it.

Let’s look at this component:

Let’s run it and click the “Dispatch” button. We should see Dispatched logged on the console. That’s because the custom dispatched event is fired when we click the button.

Add event modifiers

AlpineJS also offers some event modifiers to further modify the behavior of event listeners. They are appended to the events they modify but separated by a . sign. For ...