In this episode, we focus on the basics of event handling in Alpine.js. While we've already touched on events earlier in the series, this time we go deeper, looking at practical examples and showcasing several useful event modifiers to make our lives easier.
We start by getting familiar with how basic event listeners like x-on:click
work, and even show the shorthand @click
(if you're coming from Vue, this will feel familiar). There's a quick demo using buttons and console.log
to make sure everyone sees it in action.
From there, the episode dives into a more hands-on example involving a text area—imagine the input you'd have in a chat app. We set it up so pressing Enter submits the form, but holding Shift+Enter lets you add a new line instead of submitting. Here, you'll see how to use event modifiers, keep track of Shift being held, and even how to programmatically submit a form from within your component. We log lots to the console during this process to make the inner workings less mysterious.
Next up is a neat dropdown menu example. The menu opens with a button, but the cool part is how we let users close the menu by clicking anywhere outside of it. Alpine’s @click.outside
modifier makes this extremely easy, and you’ll see how simple it is to wire up this pattern.
The episode wraps up by pointing you at the Alpine docs for more specific event needs and recaps how event modifiers and handlers unlock a ton of UX improvements with minimal code. This is an action-heavy episode—so it’s a perfect time to pause and play along in your own editor!