x-on - Event Listeners in Alpine.js
From the Alpine.js cheat sheet · Directives - User Interaction · verified Jul 2026
x-on - Event Listeners
Attach event listeners to elements (shorthand: @)
html
<div x-data="{ count: 0 }">
<!-- Longhand syntax -->
<button x-on:click="count++">Increment</button>
<!-- Shorthand @ syntax (recommended) -->
<button @click="count++">Increment</button>
<p x-text="count"></p>
</div>✅ @ is shorthand for x-on: (use @ for cleaner code)
💡 Modifiers like .prevent, .stop work like Vue.js
🔍 Access event object with $event magic property
⚡ Built-in modifiers: .debounce, .throttle, .once, .outside
x-oneventsclicklisteners@