小程序：事件类型和事件对象

前边说到触发事件是由“用户在渲染层的行为反馈”以及“组件的部分状态反馈”引起的，由于不同组件的状态不一致，所以我们这里不讨论组件相关的事件（组件的事件可以参考其参数说明，详情见官方文档 https://mp.weixin.qq.com/debug/wxadoc/dev/component/ ） 常见的事件类型如表3-10所示。

表3-10 常见的事件类型

类型 	触发条件
touchstart 	手指触摸动作开始
touchmove 	手指触摸后移动
touchcancel 	手指触摸动作被打断，如来电提醒，弹窗
touchend 	手指触摸动作结束
tap 	手指触摸后马上离开
longpress 	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap 	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend 	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart 	会在一个 WXSS animation 动画开始时触发
animationiteration 	会在一个 WXSS animation 一次迭代结束时触发
animationend 	会在一个 WXSS animation 动画完成时触发

当事件回调触发的时候，会收到一个事件对象，对象的详细属性如下表所示。

表3-11 事件对象属性

属性 	类型 	说明
type 	String 	事件类型
timeStamp 	Integer 	页面打开到触发事件所经过的毫秒数
target 	Object 	触发事件的组件的一些属性值集合
currentTarget 	Object 	当前组件的一些属性值集合
detail 	Object 	额外的信息
touches 	Array 	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches 	Array 	触摸事件，当前变化的触摸点信息的数组

这里需要注意的是target和currentTarget的区别，currentTarget为当前事件所绑定的组件，而target则是触发该事件的源头组件。

代码清单3-19 事件对象示例

<!-- page.wxml -->
<view id="outer" catchtap="handleTap">
  <view id="inner">点击我</view>
</view>

// page.js
Page({
  handleTap: function(evt) {
       // 当点击inner节点时
    // evt.target 是inner view组件
       // evt.currentTarget 是绑定了handleTap的outer view组件
       // evt.type == “tap”
       // evt.timeStamp == 1542
       // evt.detail == {x: 270, y: 63}
       // evt.touches == [{identifier: 0, pageX: 270, pageY: 63, clientX: 270, clientY: 63}]
       // evt.changedTouches == [{identifier: 0, pageX: 270, pageY: 63, clientX: 270, clientY: 63}]
  }
})

关于target和currentTarget对象的详细参数如表3-12所示。

表3-12 target和currentTarget事件对象属性

属性 	类型 	说明
id 	String 	当前组件的id
tagName 	String 	当前组件的类型
dataset 	Object 	当前组件上由data-开头的自定义属性组成的集合

关于touch和changedTouches对象的详细参数如表3-13所示。

表3-13 touch和changedTouches对象属性

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