Events

在 Storyboard 中可以为构件配置事件的处理，例如：

brick: "your-brick"
events:
  something.happened:
    action: "console.warn"
  others.happened:
    - action: "console.log"
    - target: "#other-brick"
      method: "openModal"

对于以上配置，在构件 <your-brick> 发起 something.happened 事件时，将触发内建处理函数 console.warn；而在发起 others.happened 事件时，将依次触发内建函数 console.log、找到 id="other-brick" 的构件并调用它的 openModal() 方法。

构件的事件处理器主要有三种：内建处理器、Provider 处理器、自定义构件处理器。

内建处理器

使用 action: "..." 来配置内建处理器，使用 args: [...] 设置传递给处理器的参数。

当前内建处理器主要有以下几类：

内建处理器：history.*

更多信息请参考 History 会话历史。

Action
`history.push`
`history.replace`
`history.goBack`
`history.goForward`
`history.pushQuery`
`history.replaceQuery`
`history.pushAnchor`
`history.reload`
`history.block`
`history.unblock`

内建处理器：location.*

Action	Arguments	description
`location.reload`	-	浏览器刷新页面
`location.assign`	`url: string`	浏览器跳转页面，例如 `${BASE_URL}${PATH_NAME}?q=any`

内建处理器：window.*

Action	Arguments	description
`window.open`	`url: string, target: string`	打开页面（注意：需要自行按需使用 `BASE_URL` 补上 `/next` 的前缀）
`window.postMessage`	`data: unknown, origin?: string`	发送消息

内建处理器：event.*

Action	Arguments	description
`event.preventDefault`	-	阻止事件的默认行为

内建处理器：console.*

Action	Arguments	description
`console.log`	`any`	-
`console.error`	`any`	-
`console.warn`	`any`	-
`console.info`	`any`	-

内建处理器：message.*

Action	Arguments	description
`message.success`	`string`	成功提示
`message.error`	`string`	失败提示
`message.warn`	`string`	告警提示
`message.info`	`string`	信息提示

内建处理器：handleHttpError

Action	Arguments	description
`handleHttpError`	-	请求报错弹框提示

内建处理器：context.*

context.* 接收两个参数：context name 和 context value。更多信息请参考 Context 上下文。注意：不能对绑定构件属性的 Context 执行 context.* 操作。

Action	Arguments	description
`context.assign`	`name: string, newValue: any`	使用 `Object.assign()` 更新已有的 Context 值
`context.replace`	`name: string, newValue: any`	使用新的值替换已有的 Context 值
`context.load`	`name: string`	主动加载一个懒加载的 Context
`context.refresh`	`name: string`	强制更新一个异步的 Context

内建处理器：state.*

state.* 接收两个参数：state name 和 state value。更多信息请参考 Template State 模板状态数据。

Action	Arguments	description
`state.update`	`name: string, newValue: any`	使用新的值替换已有的 State 值
`state.load`	`name: string`	主动加载一个懒加载的 State
`state.refresh`	`name: string`	强制更新一个异步的 State

内建处理器：localStorage.*

localStorage 存储的信息，支持写入数据（setItem）方法和移除项（removeItem）方法。

需要获取数据的时候使用表达式：<% LOCAL_STORAGE.getItem("your-key") %>

Action	Arguments	description
`localStorage.setItem`	`key: string, value: any`	往 `localStorage` 中写入一项数据
`localStorage.removeItem`	`key: string`	往 `localStorage` 中移除项

内建处理器：sessionStorage.*

sessionStorage 存储的信息，支持写入数据（setItem）方法和移除项（removeItem）方法。

需要获取数据的时候使用表达式：<% SESSION_STORAGE.getItem("your-key") %>

Action	Arguments	description
`sessionStorage.setItem`	`key: string, value: any`	往 `sessionStorage` 中写入一项数据
`sessionStorage.removeItem`	`key: string`	往 `sessionStorage` 中移除项

内建处理器：tpl.*

tpl.dispatchEvent 可以用于在 Custom Template 自定义模板内部定义的 useBrick 中以 Custom Template 的名义对外发送事件。

它触发时将使用该构件所属的 Custom Template 作为事件源发送自定义事件，第一个参数为新的事件类型名，第二个参数是 CustomEventInit，可以包装新的 detail 数据。。

Action	Arguments	description
`tpl.dispatchEvent`	`eventType: string, init: CustomEventInit`	使用构件所属的 Custom Template 作为事件源发送自定义事件

Provider 处理器

使用 useProvider 指定要使用的 Provider 构件名，并通过 callback 来处理 Provider 调用后的结果。

Field	type	required	default	description
`useProvider`	`string`	✔️	-	Provider 构件名
`args`	`any[]`	-	-	调用构件方法时传递的参数，不填则将原始事件本身作为唯一参数传入
`callback`	`{ success, error, finally, progress }`	-	-	执行 Provider 构件的 `resolve(...args)` 后的异步回调，更多信息请参考 Provider 异步回调
`poll`	`ProviderPollOptions`	-	-	启用轮询模式，更多信息请参考 Provider 轮询

自定义构件处理器

自定义构件处理器让构件的事件可以传递给其它指定构件，执行指定构件的方法或设置指定构件的属性。

自定义构件处理器：执行指定构件方法

Field	type	required	default	description
`target`	`string`	✔️	-	接收事件的构件的 css selector
`multiple`	`bool`	-	`false`	是否查询多个构件（`querySelectorAll`），而不是单个构件（`querySelector`）
`method`	`string`	✔️	-	想要调用的构件的方法名
`args`	`any[]`	-	`[event]`	调用构件方法时传递的参数，不填则将原始事件本身作为唯一参数传入
`callback`	`{ success, error, finally }`	-	-	执行 `method` 后的异步回调，更多信息请参考 Provider 异步回调

自定义构件处理器：设置指定构件属性

Field	type	required	default	description
`target`	`string`	✔️	-	接收事件的构件的 css selector
`multiple`	`bool`	-	`false`	是否查询多个构件（`querySelectorAll`），而不是单个构件（`querySelector`）
`properties`	`object`	-	-	想要设置模板构件的属性字典

条件判断

在事件处理器中可以配置 if 字段，以根据事件信息决定是否执行相关事件处理。它的使用方式和条件渲染大体相似，例如：

events:
  button.click:
    if: "<% EVENT.detail.length > 0 %>"
    action: history.push

变更历史

组件	版本	变更
brick_next	3.18.9	支持 `window.postMessage`

内建处理器​

内建处理器：history.*​

内建处理器：location.*​

内建处理器：window.*​

内建处理器：event.*​

内建处理器：console.*​

内建处理器：message.*​

内建处理器：handleHttpError​

内建处理器：context.*​

内建处理器：state.*​

内建处理器：localStorage.*​

内建处理器：sessionStorage.*​

内建处理器：tpl.*​

Provider 处理器​

自定义构件处理器​

自定义构件处理器：执行指定构件方法​

自定义构件处理器：设置指定构件属性​

条件判断​

变更历史​