When you want to make your web page interactive, you need to listen for user actions such as mouse clicks, keyboard input, or form changes. In Alpine.js, the x-on directive lets you respond to these events directly in your HTML. You can use x-on:eventName to listen for specific events like click, input, keydown, and more.

For example, to increase a counter when a button is clicked, you use x-on:click="count++". To update your state when a user types in a text field, use x-on:input="name = $event.target.value". The $event variable gives you access to the native event object, so you can read values or prevent default actions if needed.

Alpine.js also supports event modifiers to fine-tune how events are handled. Some common modifiers include:

• .prevent: calls event.preventDefault() to stop the default browser action;
• .stop: calls event.stopPropagation() to prevent the event from bubbling up;
• .once: ensures the handler runs only once for that event;
• .window: listens for the event on the window object instead of the element;
• .document: listens for the event on the document object.

You can combine these modifiers for more control, such as

x-on:click.prevent.stop="doSomething()"

This would prevent the default click behavior and stop the event from bubbling up the DOM.

With x-on, you can handle almost any user interaction without writing extra JavaScript or adding event listeners manually. This makes your HTML more declarative and keeps your code simple and easy to maintain.