spz-event 事件监听
监听事件,事件触发后,调用目标元素的方法。
布局
布局
跳转到“布局”何时使用
跳转到“何时使用”- 需要监听全局的事件,事件被触发后,调用目标元素的方法。
- 需要监听 window 的
message
事件,该事件被触发后,组件抛出message
事件。
代码演示
跳转到“代码演示”基本用法
跳转到“基本用法”当监听的事件触发后,调用目标元素指定的方法。
<spz-event
event-name="dj.addToCart"
target-id="cart"
target-api="render"
layout="logic"
></spz-event>
监听 window
跳转到“监听 window”监听 window 元素,当它的 meesage
事件被触发时,组件自动触发 message
事件。
<spz-event
event-name="message"
observer-id="window"
@message="..."
layout="logic"
></spz-event>
属性
跳转到“属性”属性名 | 说明 | 类型 | 默认值 | 是否必需 |
---|---|---|---|---|
event-name | 需要监听的事件名称,如有多个事件,使用 ; 分隔 |
string | - | 是 |
target-id | 目标元素的id ,当监听的事件被触发时,调用 target-api 指定的方法 |
string | - | 否 |
target-api | 指定目标元素要调用的方法 | string | render |
否 |
observer-id | 需要观察的元素id ,如果配置了,事件监听绑定会等到该元素在页面中可以被找到才绑定 |
string | window对象 | - | 否 |
delay | 延迟调用目标元素的方法,单位毫秒 | number | 0 |
否 |
事件
跳转到“事件”message
跳转到“message”当元素满足 event-name="message"
和 observer-id="window"
条件且window的 message
事件被触发时,该组件会自动触发该事件。
- event 对象的数据为原生监听的
event.data
。