文档中心 > 店铺动态卡片-开发指引

事件系统

更新时间:2022/12/07 访问次数:2966

本质上小部件框架不是基于 Webview 容器渲染的,事件和传统的 HTML5 事件有一些差异。

说明:本文档适用于小部件3.0


一、Event 基础事件


1.Event 基础事件对象属性列表


属性

类型

描述

是否支持

type

String

事件类型。

timeStamp

Integer

表示从加载文档到创建事件的毫秒数。

target

Object

dataset 在组件中可以定义数据,这些数据将会通过事件传递给逻辑层。 以 data- 开头,由连字符 - 连接多个单词,所有字母必须小写,如 data-element-type,最终会在 event.target.dataset 中会将连字符转成驼峰 elementType。


2.target 触发事件的源组件对象属性列表


属性

类型

描述

是否支持

id

String

事件源组件的 id。

否,目前暂不支持,720补充

tagName

String

当前组件的类型。

否,目前暂不支持,720补充

dataset

Object

绑定事件的组件上由 data-

开头的自定义属性的集合。

targetDataset

Object

实际触发事件的组件上由 data-

开头的自定义属性的集合。

否,目前暂不支持,720补充


注:目前模拟器的事件结构和真机有所差异,后续会修复此bug,请先以客户端实际效果为准。


3.案例


index.axml

<view>
  <view onTap="onTap" data-user-id="778899" id="112233">
    <text>onTap {{count}}</text>
  </view>
</view>


index.js

Component({
  data: {
    count: 0
  },

  onInit() {
    
  },
  didMount() {
    
  },
  methods: {
    onTap(e) {
      console.log(e.type);  // click
      console.log(e.timeStamp);  // 1655968197906
      console.log(e.target.dataset);  // {"dataUserId": "778899"}
      this.setData({ count: this.count + 1 });
    }
  }

})


二、特


事件冒泡模型请参考 W3C 冒泡模型。

FAQ

关于此文档暂时还没有FAQ
返回
顶部