通过事件实现UI引擎前端页面组件交互

前提条件

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

为组件绑定事件

1. 在页面设计器的中心画布区，单击选中目标组件。
2. 在右侧设置面板中，单击，展开“高级”设置面板。
3. 在“事件绑定”栏中，将鼠标悬停在“绑定事件”上方，从展开的下拉列表中，选择需要绑定的事件类型（如“onClick | 点击事件”），弹出“事件绑定”窗口。
4. 在弹出的窗口中，根据实际业务需求，选择以下方式完成操作：
   • 方式一：创建新方法（系统默认）
     系统会自动根据事件类型生成默认方法名称，您可进行以下配置：

     图1 添加新方法
     

     表1 事件方法配置信息

     参数名称	参数说明
     方法名称	默认与事件同名，可根据需要自定义命名。如“handleClick”。
     扩展参数设置	勾选此选项后，调用当前事件传入的真实参数将以数组格式追加在原有事件参数之后。 默认不勾选。 示例： onChangeNew(eventArgs, extParam1, extParam2, ...)

   • 方式二：选择已有方法

     在“响应方法”中，选择已定义的方法作为事件的响应方法。

     注意：已定义的方法名称无法在此窗口中修改，如需修改，请前往“页面JS”面板操作。

5. 单击“确定”，系统将完成事件与组件的绑定操作。
   事件绑定完成后，系统会自动打开“页面JS”面板。如果为新建方法，系统会在该面板中自动生成该方法的基础结构，您可在此面板中编写并编辑方法的业务逻辑。如果为“选择已有方法”，也可在此面板中查看或调整方法逻辑。

   图2 逻辑编辑
   

组件通用事件

UI引擎为各组件内置了通用事件（如表2所示），不同组件还可能包含专属事件。