# 管理UI引擎前端页面事件与方法
本文档将指导您完成UI引擎前端页面中事件与方法的全生命周期管理，包括在页面JS中添加新方法、为组件添加新事件，以及对已绑定事件进行快速定位、修改与解绑操作。
#### 前提条件
- 已进入目标项目的页面设计器，具体操作请参见[进入前端项目页面设计器](https://support.huaweicloud.com/usermanual-idme/idme_ui_0014.html)。
- 页面中已添加至少一个组件，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。
 
#### 在页面JS中添加新方法
1. 在页面设计器的左侧插件功能区，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002501139512.png)，展开"页面JS"面板。
2. 在展开的"页面JS"面板，使用函数声明的方式定义新方法。 
   示例：
   ```
   function myNewMethod(param1, param2) {
     // 方法逻辑
   }
   ```
   
   
3. 单击"保存"并关闭面板。 
   添加的新方法可在为前端页面组件绑定事件时选择，具体操作请参见[通过事件实现UI引擎前端页面组件交互](https://support.huaweicloud.com/usermanual-idme/idme_ui_0081.html)。
   
   
 
#### 为组件添加新事件
目前仅支持添加浏览器原生事件（如onDrag、onScroll等）。
1. 在页面设计器的中心画布区，单击选中目标组件。
2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002501492166.png)，展开"高级"设置面板。
3. 在"事件绑定"栏中，单击"添加新事件"，弹出"添加新事件"窗口。
4. 在弹出的窗口中，设置以下信息，单击"确定"。 
   图1设置新事件   
   ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002501331124.png)
   表1添加新事件配置信息 
   | 参数名称  | 参数说明                                      |
   |:---|:---|
   | 事件函数名 | 自定义事件名称，必须遵循小驼峰命名格式。例如onDrag、onMouseOver。 |
   | 事件描述  | 自定义事件说明，用于标注事件用途，提升可维护性。                  |
      
   
   
 
#### 事件快速定位与修改
针对已绑定的事件，系统支持快速定位方法代码、更换绑定方法、追加扩展参数及解绑事件。
1. 在页面设计器的中心画布区，单击选中目标组件。
2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002501518026.png)，展开"高级"设置面板。
3. 在"事件绑定"栏中，找到已绑定的目标事件，根据需求执行以下操作： 
   - **快速定位方法** ：单击目标事件所在行右侧的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002533258257.png)，系统将自动在"页面JS"面板中定位到该事件对应的方法代码位置。
   
   - **更换事件方法/追加扩展参数** ：单击目标事件所在行右侧的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002533453743.png)，在弹出的"事件绑定"窗口中，可重新选择方法或调整扩展参数配置。完成后，单击"确定"保存修改。
   
   - **解绑事件** ：单击目标事件所在行右侧的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002501533836.png)，在弹出的提示框中单击"确定"，即可解除该事件与组件的绑定关系。