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 |
否 |
keep-status | 存在此属性,浏览器缓存将会写入记录,事件只会被触发一次 | - | - | 否 |
manual | 存在此属性时,事件参数才会被传递,否则事件参数为null | - | - | 否 |
方法
跳转到“方法”unListen
跳转到“unListen”取消对指定事件的监听。
参数名 | 说明 | 类型 | 是否必需 |
---|---|---|---|
eventName | 需要取消监听的事件名 | string | 否 |
事件
跳转到“事件”message
跳转到“message”当元素满足 event-name="message"
和 observer-id="window"
条件且window的 message
事件被触发时,该组件会自动触发该事件。
- event 对象的数据为原生监听的
event.data
。