Events are composed of two parts: Event Triggers and Event Handlers.

• Events Handlers are how the State of a Reflex application is updated. They are triggered by user interactions with the UI, such as clicking a button or hovering over an element. Events can also be triggered by the page loading or by other events.

• Event triggers are component props that create an event to be sent to an event handler. Each component supports a set of events triggers. They are described in each component's documentation in the event trigger section.

Lets take a look at an example below. Try mousing over the heading to change the word.

In this example, the heading component has the event trigger, on_mouse_over. Whenever the user hovers over the heading, the next_word event handler will be called to cycle the word. Once the handler returns, the UI will be updated to reflect the new state.

Adding the @rx.event decorator above the event handler is strongly recommended. This decorator enables proper static type checking, which ensures event handlers receive the correct number and types of arguments.

In the event section of the documentation, you will explore the different types of events supported by Reflex, along with the different ways to call them.