codecamp

支付宝小程序框架 事件·对象

组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。

BaseEvent 基础事件

BaseEvent 基础事件对象属性列表:

属性 类型 描述
type String 事件类型
timeStamp Integer 事件生成时的时间戳
target Object 触发事件的组件的属性值集合

type

事件的类型。

timeStamp

事件生成时的时间戳。

target

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

示例代码:

<view data-alpha-beta="1"  onTap="bindViewTap"> DataSet Test </view>
Page({
  bindViewTap:function(event) {
    event.target.dataset.alphaBeta === 1; // - 会转为驼峰写法
  },
});

触发事件的源组件对象,属性列表如下:

属性 类型 描述
id String 事件源组件的 id
tagName String 当前组件的类型
dataset Object 绑定事件的组件上由 data- 开头的自定义属性的集合
targetDataset Object 实际触发事件的组件上由 data- 开头的自定义属性的集合

CustomEvent 自定义事件对象

CustomEvent 自定义事件对象(继承自 BaseEvent),属性列表如下:

属性 类型 描述
detail Object 额外的信息

detail

自定义事件所携带的数据。表单组件事件会携带用户的输入信息,如 switch 组件 onChange 触发时可通过 event.detail.value 获取用户选择的状态值,媒体的错误事件会携带错误信息,更多信息请参见各组件文档事件说明。

TouchEvent 触摸事件对象

TouchEvent 触摸事件对象(继承自 BaseEvent),属性列表:

属性 类型 描述
touches Array 当前停留在屏幕中的触摸点信息的数组
changedTouches Array 当前变化的触摸点信息的数组

touches 是一个数组,每个元素为一个 Touch 对象( canvas 触摸事件中携带的 touches 是 CanvasTouch 的数组),表示当前停留在屏幕上的触摸点。

changedTouches 数据格式同 touches。 表示有变化的触摸点,如从无变有(touchstart),位置变化(touchmove),从有变无(touchend、touchcancel)。

Touch 对象

属性 类型 描述
identifier Number 触摸点的标识符
pageX, pageY Number 距离文档左上角的距离,左上角为原点 ,横向为 X 轴,纵向为 Y 轴
clientX, clientY Number 距离页面可显示的区域(屏幕除去导航条)的距离,左上角为原点,横向为 X 轴,纵向为 Y 轴

CanvasTouch 对象

属性 类型 描述
identifier Number 触摸点的标识符
x, y Number 距离 Canvas 左上角的距离,Canvas 的左上角为原点 ,横向为 X 轴,纵向为 Y 轴

示例

touchmove 事件,当用户触摸下例的组件。

<view class="move-view" onTouchMove="touchMoveHandle">
</view>

页面中响应事件的处理函数 touchMoveHandle 会被调用,TouchEvent 触摸事件对象将作为参数传入。

Page({
  touchMoveHandle(e){
    console.log(e)
  }
});

下面是打印的 TouchEvent 对象的信息:

{
  "type": "touchMove",
  "timeStamp": 1562241425847,
  "target": {
    "targetDataset": {},
    "tagName": "view",
    "dataset": {},
    "offsetLeft": 0,
    "offsetTop": 0
  },
  "currentTarget": {
    "tagName": "view",
    "dataset": {},
    "offsetLeft": 0,
    "offsetTop": 0
  },
  "touches": [
    {
      "clientX": 49.69140625,
      "clientY": 54.1640625,
      "identifier": 0,
      "pageX": 49.69140625,
      "pageY": 54.1640625
    }
  ],
  "changedTouches": [
    {
      "clientX": 49.69140625,
      "clientY": 54.1640625,
      "identifier": 0,
      "pageX": 49.69140625,
      "pageY": 54.1640625
    }
  ]
}
支付宝小程序框架 事件·介绍
支付宝小程序框架 事件·小程序运行机制
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

支付宝小程序开发文档

支付宝小程序 快速示例

支付宝小程序 小程序快速示例

支付宝小程序 框架

支付宝小程序 组件

支付宝小程序组件 基础组件

支付宝小程序组件 无障碍访问

支付宝小程序 扩展组件

支付宝小程序扩展组件 UI组件

支付宝小程序 API

支付宝小程序 开发工具

支付宝小程序 云服务

支付宝小程序 Serverless

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }