Listen for Browser Events: x-on
Explore how to listen for and handle browser events in AlpineJS using the x-on directive and its shorthand. Understand accessing event objects, passing methods, and managing keyboard and key combination events to enhance interactivity without external JavaScript.
We can listen for browser events in AlpineJS just like we can in plain JavaScript. But unlike JavaScript, AlpineJS provides an elegant API to listen for and handle Document Object Model(DOM) events with the x-on directive.
The x-on AlpineJS directive allows us to listen for DOM-fired events. Its syntax follows the pattern x-on:[DOM event], where [DOM event] is the DOM event we’re listening for. For example, to listen for the click event, we use the following syntax:
The x-on directive is very powerful because it allows us to respond to any DOM dispatched event, not only the click event. The snippet below shows how to listen for the input ...