Reacting to events

Interactivity is what takes your toddle project from a static website to a full-scale dynamic web app. The click of a button, a modified attribute, or the response of an API should cause some kind of feedback to the user.

You will learn how responding to application or user events is the only way cause side effects and update the state of your components.

Listening to user events

Reacting to user events is the most common form of interaction. You can set these up on all elements.

Application events

There are a few special events on the top level of each of your components:

`onLoad`: This is useful for triggering actions as soon as the component is loaded

`onAttributeChange`: This is useful for triggering actions in response to an attribute. This could be to reload an API with new data when an attribute changes.

Declaring component events

Declaring and emitting events from your components plays a crucial role in building highly dynamic and scalable applications.

Events are the unidirectional flow of data from child components to their ancestors. Events always bubble upwards. For flowing data down, parent components can communicate with their children by setting their attributes .

Read much more about declaring custom events on components.

Event Workflows

Listening to events is not much fun without them causing some kind of action. In toddle, you can set up workflows in response to an event. A workflow consists of a graph of actions. An action could be to `Set variable`, `Log to console`, or `Navigate to URL`.

Actions are unpure functions that usually mutate persistent data or have a side-effect.