Custom Events and Event Modifiers with x-on
Explore how to manage custom events in AlpineJS using the x-on directive and enhance event handling by applying modifiers such as prevent, stop, outside, window, and debounce. Understand how these modifiers change default behaviors, control event propagation, and improve interactivity in your web components.
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 example, the .prevent event modifier ...