# Event handlers

Through the use of event handlers you can trigger an [action](https://docs.appfarm.io/reference/actions) to run either automatically or due to user interaction. Automatic events occur when an app is in use, such as when an [app](https://docs.appfarm.io/reference/apps) or [view](https://docs.appfarm.io/reference/apps/ui/views) is loaded, or a [timer](https://docs.appfarm.io/apps/app-settings#timers). User interaction events can include clicking a [UI component,](https://docs.appfarm.io/library/ui-components) updating a value in a data input component, or running a [keyboard shortcut](https://docs.appfarm.io/apps/ui/views#keyboard-event-handlers).

## Automatic events

<table><thead><tr><th width="222">Event</th><th>Description</th></tr></thead><tbody><tr><td><strong>On App Load</strong></td><td>Triggered when the app is loaded/refreshed after data sources have been populated but before the UI is shown to the user. Configured in <a href="../../apps/app-settings#event-handlers">App settings</a>.</td></tr><tr><td><strong>On App Loaded</strong></td><td>Triggered when the app is loaded/refreshed and after the UI is shown to the user. Configured in <a href="../../apps/app-settings#event-handlers">App settings</a>.</td></tr><tr><td><strong>On Online</strong>/<strong>On Offline</strong></td><td>For Offline Apps. Configured in <a href="../../apps/app-settings#event-handlers">App settings</a>.</td></tr><tr><td><strong>On Visible/On Hidden</strong></td><td>Triggered when an App goes inactive or active. Configured in <a href="../../apps/app-settings#event-handlers">App settings</a>.</td></tr><tr><td><strong>On Browser History Change</strong></td><td>Can be used to trigger an action when the browser history changes. Configured and documented in <a href="../../apps/app-settings#event-handlers">App settings</a>.</td></tr><tr><td><strong>On Timeout</strong></td><td>Trigged when a timer expires. Configured in <a href="../../apps/app-settings#timers">App settings</a>.</td></tr><tr><td><strong>On View Load/Dialog Open/Drawer Open</strong></td><td>Triggered before a <a href="../apps/ui/views">view</a> is loaded/opened. Configured in <a href="../../apps/ui/views#event-handlers">view properties</a>.</td></tr><tr><td><strong>On View Loaded/Dialog Opened/Drawer Opened</strong></td><td>Triggered after a <a href="../apps/ui/views">view</a> is loaded/opened. Configured in <a href="../../apps/ui/views#event-handlers">view properties</a>.</td></tr><tr><td><strong>On Load</strong></td><td>Triggered after a component is loaded. Configured in component properties for Image and <a href="../../library/ui-components/animated-component">Animated component</a>.</td></tr><tr><td><strong>On Complete</strong></td><td>Triggered after after a component has completed its purpose. Configured in component properties for <a href="../../library/ui-components/animated-component">Animated component</a>.</td></tr></tbody></table>

## User interaction events

User interaction events are configured in [UI components](https://docs.appfarm.io/library/ui-components). For details on how to add keyboard event handlers, see [Views](https://docs.appfarm.io/apps/ui/views#keyboard-event-handlers).

<table><thead><tr><th width="218">Event</th><th>Description</th></tr></thead><tbody><tr><td><strong>On [Location] Click</strong></td><td>Triggered when the user clicks or taps on a component (like a Button) or part of a component (like a Table row). Can be used to make containers and Image components clickable. If used in a data iterator, the element clicked will contain the <a href="../objects#object-in-context">object in context</a>.</td></tr><tr><td><strong>On Hover Start</strong></td><td>Triggered when the mouse pointer enters a container. Use <a href="../../apps/ui/component-properties#conditional-style-properties">Conditional styles</a> to style a component on hover.</td></tr><tr><td><strong>On Hover End</strong></td><td>Triggered when the mouse pointer leaves a container.</td></tr><tr><td><strong>On Double Click</strong></td><td>Triggered when double clicking a container</td></tr><tr><td><strong>On Right Click</strong></td><td>Triggered when right clicking a container</td></tr><tr><td><strong>On Drag Start</strong></td><td>Triggered when a user starts to drag a component within a container that has <strong>Enable Draggable</strong> selected.</td></tr><tr><td><strong>On Drop</strong></td><td>Triggered when a user drops a component within a container that has <strong>Enable Drop Area</strong> selected.</td></tr><tr><td><strong>On File Paste</strong></td><td>Triggered when a file is pasted on a container with <strong>Enable File Drop</strong> selected. Can be used to run an action with Create file object to upload the file.</td></tr><tr><td><strong>On File Drop</strong></td><td>Triggered when a file is dropped on a container with <strong>Enable File Drop</strong> selected. Can be used to run an action with Create file object to upload the file.</td></tr><tr><td><strong>On File Over</strong></td><td>Triggered when a file is dragged over a container with <strong>Enable File Drop</strong> selected. Can be used to toggle visual feedback.</td></tr><tr><td><strong>On File Out</strong></td><td>Triggered when a file is dragged over and then out of a container with <strong>Enable File Drop</strong> selected. Can be used to toggle visual feedback.</td></tr><tr><td><strong>On Viewport Enter</strong></td><td>Triggered when a container with <strong>Enable Listener</strong> selected enters the viewport, usually on scroll.</td></tr><tr><td><strong>On Viewport Leave</strong></td><td>Triggered when a container with <strong>Enable Listener</strong> selected leaves the viewport, usually on scroll.</td></tr><tr><td><strong>On Focus</strong></td><td>Triggered when a Text edit component receives focus due to a user clicking on or using the keyboard to select the component.</td></tr><tr><td><strong>On Lost Focus</strong></td><td>Triggered when a Text edit component loses focus due to a user clicking away or using the keyboard to select another component.</td></tr><tr><td><strong>On Enter</strong></td><td>Triggered when the <code>Enter/Return</code> key is pressed and a Text edit component has focus. Useful when the component is used for searching to execute the search.</td></tr><tr><td><strong>On Value Change</strong></td><td>Triggered after a value has changed in a data input component. The previous value can be sent as an action param.</td></tr><tr><td><strong>On Open</strong></td><td>Available on UI Components <a href="../../library/ui-components/select">Select </a>and <a href="../../library/ui-components/multi-select">Multi select</a>. Triggered when the droplist is opened.</td></tr><tr><td><strong>On Close</strong></td><td>Available on UI Components <a href="../../library/ui-components/select">Select </a>and <a href="../../library/ui-components/multi-select">Multi select</a>. Triggered when the droplist is closed.</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.appfarm.io/reference/platform-concepts/event-handlers.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
