事件介绍

最近更新时间:2024-02-02 10:00:52

我的收藏

什么是事件

事件(Event)是页面的交互组成,例如按钮单击打开新页面,表单按钮单击提交数据。

适用场景

适用于所有页面交互的场景,例如提示信息、打开页面、打开弹窗、查询数据等。

基础能力

事件由下述触发条件执行动作 两部分构成。例如按钮单击打开页面,触发条件是按钮单击,执行动作是打开新页面。
说明:
如果有多个事件方法连续调用,则不同事件方法之间通过 event 对象 进行传参,例如调用数据源查询方法后,将返回的数据通过弹窗显示出来。若多个事件方法的调用需要在页面不同组件中进行复用,也可使用 页面事件流 进行定义和调用。

触发条件

事件的执行需要由某个条件来触发,不同的组件存在不同类型的触发条件,例如按钮的点击 click、输入框的聚焦 focus 等。

由组件行为触发

通用触发条件
表单类组件的触发条件
其他组件触发条件
触发条件
功能
onClick(单击时)
鼠标单击时触发
触发条件
功能
change(输入改变)
输入值发生改变时触发
focus(聚焦)
组件获取焦点时触发
Blur(失焦)
组件失去焦点时触发
select(选择)
组件被选中时触发
confirm(确认)
组件回车确认时触发
clear(清除内容)
组件清空输入时触发
submit(提交)
表单提交时触发
每个组件支持的事件,您可以在单击编辑器组件属性面板下方 > 事件查看,或请直接参见 组件列表文档 对应每个组件介绍的事件模块进行了解。

由页面生命周期触发

除组件触发外,页面打开和关闭也可作为触发条件。例如加载时,查询数据并储存,以下是页面打开和关闭时支持的触发条件。
事件名
功能
页面加载时(loading)
页面加载时触发动作
页面显示时(show)
页面显示时触发动作
页面初次渲染完成(ready)
页面渲染完成触发动作
页面隐藏(hide)
页面隐藏时触发动作
页面卸载(unload)
页面卸载前触发动作
使用路径为:在大纲树中选中页面,打开事件面板,选择对应触发条件和执行动作方法。




执行动作

触发事件后,可配置页面、数据查询、组件内置方法和自定义方法等平台内置的动作方法。更多执行动作相关介绍,请参见 执行动作说明
如果在事件的执行动作中使用了 JavaScript 代码节点,即调用自定义 JS 方法,则在 JS 方法正常执行完成后默认会触发成功时节点,如需触发失败时节点,可在自定义 JS 方法中通过 throw new Error('message')return Promise.reject('message') 来达到预期效果,详情请参见 事件处理handler
export default async function ({ event, data }) { const result = await fetch("http://example.com/movies.json").then(response => response.json()); if (result.code) { // 接口返回错误时抛出异常 throw new Error(result.message); // return Promise.reject(result); // Promise.reject 也会走到异常分支 }else { // 正常返回 return result; } }