# 通过事件实现UI引擎前端页面组件交互
本文档指导您为UI引擎前端页面的组件绑定事件，从而实现组件的交互功能。
#### 前提条件
- 已进入目标项目的页面设计器，具体操作请参见[进入前端项目页面设计器](https://support.huaweicloud.com/usermanual-idme/idme_ui_0014.html)。
- 页面中已添加至少一个组件，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。
 
#### 为组件绑定事件
1. 在页面设计器的中心画布区，单击选中目标组件。
2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002501301086.png)，展开"高级"设置面板。
3. 在"事件绑定"栏中，将鼠标悬停在"绑定事件"上方，从展开的下拉列表中，选择需要绑定的事件类型（如"onClick \| 点击事件"），弹出"事件绑定"窗口。
4. 在弹出的窗口中，根据实际业务需求，选择以下方式完成操作： 
   - **方式一：创建新方法（系统默认）**
     系统会自动根据事件类型生成默认方法名称，您可进行以下配置：
     图1添加新方法   
     ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002533249991.png "点击放大")
     表1事件方法配置信息 
     | 参数名称   | 参数说明                                                                                                                                                                                                                                                   |
     |:---|:---|
     | 方法名称   | 默认与事件同名，可根据需要自定义命名。如"handleClick"。                                                                                                                                                                                                                     |
     | 扩展参数设置 | 勾选此选项后，调用当前事件传入的真实参数将以数组格式追加在原有事件参数之后。 默认不勾选。 示例： ``` onChangeNew(eventArgs, extParam1, extParam2, ...) ``` |
        
     
   
   - **方式二：选择已有方法**
     在"响应方法"中，选择已定义的方法作为事件的响应方法。
     **注意：**已定义的方法名称无法在此窗口中修改，如需修改，请前往"页面JS"面板操作。
     
   
   
   
   
5. 单击"确定"，系统将完成事件与组件的绑定操作。 
   事件绑定完成后，系统会自动打开"页面JS"面板。如果为新建方法，系统会在该面板中自动生成该方法的基础结构，您可在此面板中编写并编辑方法的业务逻辑。如果为"选择已有方法"，也可在此面板中查看或调整方法逻辑。
   图2逻辑编辑   
   ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002501330090.png "点击放大")
   
   
 
#### 组件通用事件
UI引擎为各组件内置了通用事件（如[表2]所示），不同组件还可能包含专属事件，具体可参见[设置UI引擎前端页面组件属性](https://support.huaweicloud.com/usermanual-idme/idme_ui_0017.html)。
 表2组件通用事件 
| 事件名         | 类型                      | 触发场景           | 说明                                                       |
|:---|:---|:---|:---|
| onClick     | (...args: any) =\> void | 组件被单击时触发。      | 优先使用组件提供的参数，如果没有，则传递浏览器的"MouseEvent"事件参数，适用于按钮、卡片等可单击组件。 |
| onChange    | (...args: any) =\> void | 组件值发生变化时触发。    | 仅部分组件支持此事件，具体参数由组件实现决定。适用于输入框、下拉选择器等表单组件。                |
| onFocus     | (e: Event) =\> void     | 元素获得焦点时触发。     | 传递标准的浏览器"Event"或"MouseEvent"对象，适用于输入框等表单元素。              |
| onMousemove | (e: Event) =\> void     | 鼠标在组件区域内移动时触发。 | 实时追踪鼠标在组件区域内的移动轨迹，兼容所有可视化组件，适用于拖拽、悬浮提示、轨迹追踪等场景。          |