管理UI引擎前端页面事件与方法

前提条件

• 已进入目标项目的页面设计器，具体操作请参见进入前端项目页面设计器。
• 页面中已添加至少一个组件，具体操作请参见为UI引擎前端页面添加物料组件。

在页面JS中添加新方法

1. 在页面设计器的左侧插件功能区，单击，展开“页面JS”面板。
2. 在展开的“页面JS”面板，使用函数声明的方式定义新方法。

   示例：

   function myNewMethod(param1, param2) {
     // 方法逻辑
   }

3. 单击“保存”并关闭面板。

   添加的新方法可在为前端页面组件绑定事件时选择，具体操作请参见通过事件实现UI引擎前端页面组件交互。

为组件添加新事件

目前仅支持添加浏览器原生事件（如onDrag、onScroll等）。

1. 在页面设计器的中心画布区，单击选中目标组件。
2. 在右侧设置面板中，单击，展开“高级”设置面板。
3. 在“事件绑定”栏中，单击“添加新事件”，弹出“添加新事件”窗口。
4. 在弹出的窗口中，设置以下信息，单击“确定”。
   图1 设置新事件
   

   表1 添加新事件配置信息

   参数名称	参数说明
   事件函数名	自定义事件名称，必须遵循小驼峰命名格式。例如onDrag、onMouseOver。
   事件描述	自定义事件说明，用于标注事件用途，提升可维护性。

事件快速定位与修改

针对已绑定的事件，系统支持快速定位方法代码、更换绑定方法、追加扩展参数及解绑事件。

1. 在页面设计器的中心画布区，单击选中目标组件。
2. 在右侧设置面板中，单击，展开“高级”设置面板。
3. 在“事件绑定”栏中，找到已绑定的目标事件，根据需求执行以下操作：
   • 快速定位方法：单击目标事件所在行右侧的，系统将自动在“页面JS”面板中定位到该事件对应的方法代码位置。
   • 更换事件方法/追加扩展参数：单击目标事件所在行右侧的，在弹出的“事件绑定”窗口中，可重新选择方法或调整扩展参数配置。完成后，单击“确定”保存修改。
   • 解绑事件：单击目标事件所在行右侧的，在弹出的提示框中单击“确定”，即可解除该事件与组件的绑定关系。