# Event Action

{% hint style="info" %}
**Block Information**

Available in: Page Flow

Toolbox Category: Action - Event

Block Type: [Regular](https://docs.zingy.ai/app-editor/block-anatomy#regular-block)
{% endhint %}

Use the **`Event Action`** block to take an action when the user interacts with elements on a page or form. 

This block can be considered a more generic version of the [Mouse/Keyboard Action block](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/mouse-keyboard-action), where you can handle and take an action on any event, not just the Clicked, Double-Clicked, Right-Clicked and Key Pressed events.

{% hint style="success" %}
Refer to the [Event Action in Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/event-action-in-data-design) block for dynamically generated content.
{% endhint %}

The block comes in two modes which are discussed below.

## Mode 1 <a href="#mode-1" id="mode-1"></a>

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FeugktmmhkkKgVIs82bLI%2Fimage.png?alt=media&#x26;token=ab14500b-acea-4f2a-933b-b9bde4b663ff" alt="" width="377"><figcaption><p>Event Action block (Mode 1)</p></figcaption></figure></div>

The Mode 1 version of the Event Action block consists of the following (from left to right, top to bottom):

* *Event Name:* [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts a [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value representing the name of the event you want to handle and take an action on. See the [Event names section](#event-names) for more details.
* *Element*: [Selectable Input](https://docs.zingy.ai/app-editor/block-anatomy#selectable-input) to choose the element.
* *Tasks*: a [Flow Parameter](https://docs.zingy.ai/app-editor/block-anatomy#flow-parameters) where you connect blocks that specify what you want done when the event occurs. Use the [Action/Event Info](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/action-event-info) block to get more information about the event.

## Mode 2 <a href="#mode-1" id="mode-1"></a>

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FWcfPTeYKmTZEM8csYTnn%2Fimage.png?alt=media&#x26;token=d7a37e8d-b581-4daf-b9e2-958a5fb2b880" alt="" width="377"><figcaption><p>Event Action block (Mode 2)</p></figcaption></figure></div>

The Mode 2 version of the Event Action block consists of the following (from left to right, top to bottom):

* *Event Name:* [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts a [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value representing the name of the event you want to handle and take an action on. See the [Event names section](#event-names) for more details.
* *Element*: [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts either a [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value in the form of a [CSS Selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) or an [*element*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value[.](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) The Element block comes pre-attached for your convenience but can be removed and customized.
* *Tasks*: a [Flow Parameter](https://docs.zingy.ai/app-editor/block-anatomy#flow-parameters) where you connect blocks that specify what you want done when the event occurs. Use the [Action/Event Info](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/action-event-info) block to get more information about the event.

***

## Event names

Some of the common event names are given below:

<table data-full-width="true"><thead><tr><th width="164">Event Name</th><th>Description</th></tr></thead><tbody><tr><td>click</td><td>Mouse click on the selected element</td></tr><tr><td>contextmenu</td><td>Mouse right-click on the selected element</td></tr><tr><td>dblclk</td><td>Mouse double-click on the selected element</td></tr><tr><td>change</td><td>Changes to the selection of a <a href="../../page-editor/built-in-elements/dropdown">Dropdown element</a></td></tr><tr><td>keypress</td><td>Key press when the selected element is in focus</td></tr><tr><td>blur</td><td>Selected element looses focus</td></tr><tr><td>focus</td><td>Selected element gains focus</td></tr></tbody></table>

For a more comprehensive list of event names please refer to:

* [jQuery information about HTML events](https://api.jquery.com/category/events/)
* [Mozilla documentation on HTML events](https://developer.mozilla.org/en-US/docs/Web/Events)

{% hint style="success" %}
NOTE: In general, the **`Event Action`** block can be used to handle any event not just the ones mentioned above or in the reference links.
{% endhint %}

***

## Usage Examples

The image below shows an example of the Event Action block (Mode 1) where the [Show Information Popup](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/show-information-popup) block is used to show a message when the selected button is clicked. This is an exact equivalent of the example shown in the [Mouse/Keyboard action block](https://docs.zingy.ai/app-editor/page-flow/mouse-keyboard-action#usage-example).

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FSZnUm5WhcgUiF25lvkOP%2Fimage.png?alt=media&#x26;token=75bd7d6a-9b92-437a-9ca0-378a58cff180" alt=""><figcaption><p>Example of Event Action block (Mode 1)</p></figcaption></figure>

The next image (below) shows an example of the Event Action block (Mode 2). Here the click event is handled and the button's state is set to disabled along with the appending of a status spinner to show that the app is processing some task.

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FGhX5HNfahJKI4cZhYIp9%2Fimage.png?alt=media&#x26;token=8edad339-8a34-4799-9689-28ef85e91ab2" alt=""><figcaption><p>Example of Event Action block (Mode 2)</p></figcaption></figure>

{% hint style="success" %}
NOTE: Using a CSS selector, you can operate on multiple elements that match the criteria specified by the selector. See the references below for more information:

* [Wikipedia article on CSS](https://en.wikipedia.org/wiki/CSS#Selector)
* [Mozilla Developer Network article on CSS selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors)
  {% endhint %}