spz-event 事件监听

监听事件,事件触发后,调用目标元素的方法。

布局

  • 需要监听全局的事件,事件被触发后,调用目标元素的方法。
  • 需要监听 window 的 message 事件,该事件被触发后,组件抛出 message 事件。

当监听的事件触发后,调用目标元素指定的方法。

<spz-event
  event-name="dj.addToCart"
  target-id="cart"
  target-api="render"
  layout="logic"
></spz-event>

监听 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 - - 否
event-pattern 条件过滤表达式,格式为 key=value 或 key!=value,支持嵌套路径(如 a.b=1)和正则表达式(如 key=/pattern/),只有当监听到的事件数据满足条件时才触发目标方法 string - 否

取消对指定事件的监听。

参数名 说明 类型 是否必需
eventName 需要取消监听的事件名 string 否

当元素满足 event-name="message" 和 observer-id="window" 条件且window的 message 事件被触发时,该组件会自动触发该事件。

  • event 对象的数据为原生监听的 event.data。
本页目录