> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Event Handling

> Learn how to bind actions to components in YiDA and write JS callbacks in the action panel to implement Custom handling logic for events such as clicks and value changes.

Event handling is one of the most common pieces of logic in system development. YiDA provides a General user action binding capability, along with an action panel for writing JS handling logic. Implementing event handling typically involves the following two steps:

* Add an action binding Configuration to the Component (nearly every Component offers the corresponding action binding options).
* Implement the action handling logic in the action panel.

<Tip>
  When binding an action, the User can Configure parameters for it, as shown below. The Configured parameters can be read inside the handler Function via `this.params.xxx`, where `xxx` is the parameter name set by the User.

  How to read parameters:

  ```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
  export function onClick(){
    const { name, age } = this.params
    console.log(name, age);
  }
  ```
</Tip>

## Use Cases

Here is a simple example of event handling:
Listen for a Button click event and pop up a dialog to display related information. To implement an event handling feature, the User needs to perform two steps:

* Bind a User Action event to the Component. As shown below, we bind an `onClick` event to the Button Component.
* Implement the corresponding event handling logic in the action panel. When the User clicks the Button, we pop up a dialog to display a greeting (`state.name` is a global variable we set, with an initial value of "Xiaoming").

When the User clicks the Preview button in the top-right corner, the following Preview effect appears. When the User clicks the Hello Button, the program pops up a dialog showing "Hello Xiaoming".