Listen for Browser Events: x-on
Learn to respond to Document Object Model (DOM) events with the x-on directive.
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 ...