# Event handlers

Within QuickDEV, event handlers fulfill the role of gathering and processing events originating from components and queries, subsequently executing subsequent actions. For instance, with a **Button** component, you can append an event handler to initiate the **Run query** action upon detecting a button **Click** event.

{% hint style="info" %}
You can include multiple event handlers for a single component or query, and these handlers operate concurrently, offering flexibility in handling various interactions simultaneously.
{% endhint %}

## Component events

Various components offer distinct events. For instance, **Button** components exclusively provide a **Click** event.

<figure><img src="/files/wHxWg5hFl2cwcWnZWKX8" alt=""><figcaption></figcaption></figure>

## Query events

Queries can produce either successful or failed outcomes, thus presenting two events: **Success** and **Failure**. Within the Query editor, you can assign event handlers directly to queries.

<figure><img src="/files/QWPekC8W6GdnVH3SlTQL" alt=""><figcaption></figcaption></figure>

## Actions

In QuickDEV, there exists a variety of event handler actions tailored for diverse scenarios. You can configure these actions by selecting from the dropdown list labeled "**Action**" within an event handler.

<figure><img src="/files/e2SsRoFigiseWOlZ4xzS" alt=""><figcaption></figcaption></figure>

## Run query

Trigger the selected query.

<figure><img src="/files/PqsvGNE9ekOhjF0q8l3B" alt=""><figcaption></figcaption></figure>

## Control components

To control a component, first select the component from the **Component** dropdown list, then proceed to choose one of its methods from the **Method** dropdown list.

<figure><img src="/files/mwrvrndZx1mGU5JyNKXw" alt=""><figcaption></figcaption></figure>

## Set dynamic variable

[Set dynamic variable](https://docs.quickdev.cloud/applications/actions-editor/dynamic-variable)

## Go to app

Navigate to a QuickDEV app that supports query or hash parameters.

| Parameter | Function                                                                               |
| --------- | -------------------------------------------------------------------------------------- |
| URL Query | Add `?key1=value1&key2=value2...` to the end of the URL of the app you intend to open. |
| URL Hash  | Add `#key1=value1&key2=value2...` to the end of the URL of the app you intend to open. |

## Go to URL

Navigate to an external URL.

<figure><img src="/files/C4xlZY1Bx4ulfMLTdreD" alt=""><figcaption></figcaption></figure>

## Show notification

Show a floating notification of informational, success, warning, or error message.

<figure><img src="/files/S2ctYSW4uWEy4OCJGnK7" alt=""><figcaption></figcaption></figure>

## Copy to clipboard

Copy a value to the clipboard

<figure><img src="/files/IJxm5BkjEUMyKLdfGTmu" alt=""><figcaption></figcaption></figure>

## Export data

Export data in a certain file type (TXT, JSON, CSV and EXCEL).

<figure><img src="/files/bVM3sh3D0CdiQK6N9XVJ" alt=""><figcaption></figcaption></figure>

## Advanced

### Only run when

An action can exclusively trigger under specific conditions. Set the running condition of an event handler within the "**Only run when**" option. The event handler will execute only when this condition evaluates to `true`.

Debounce and Throttle reduce the frequency of triggering the action.

### Debounce

Debounce introduces a delay to an action. Upon setting a debounce time, the action will not execute immediately after the event occurs; instead, it will wait until the debounce time elapses. If the event reoccurs before the time ends, the debounce time will be reset. For instance, consider an input component that triggers a query when the user modifies the text. If running the query is resource-intensive and you wish to avoid executing it after every single character input, you can delay the query execution by setting a debounce time. Consequently, the query will only run after the user finishes typing.

### Throttle

Throttle limits an action to occur only once within a specified time span. By default, each event prompts an action, but in situations where executing an action is resource-intensive, throttle proves advantageous. For example, if you configure an event handler to initiate a "**Run query**" action for updating data upon a "**Click**" event, but realize that the query is too costly to execute frequently, you can establish a throttle time to ensure the query runs only once within the defined timeframe.


---

# 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.quickdev.cloud/applications/actions-editor/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.