事件

简介

什么是事件？

  • 事件是视图层到逻辑层的通讯方式。
  • 事件可以将用户的行为反馈到逻辑层进行处理。
  • 事件可以绑定在组件上，当达到触发条件，就会执行逻辑层中对应的事件函数。
  • 事件对象可以携带额外信息，如 id, dataset, touches。

使用方式

事件分为冒泡事件和非冒泡事件：

  • 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

  • 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
    事件绑定的写法同组件的属性，以 key、value 的形式。

  • key 以on或catch开头，然后跟上事件的类型，onTap, catchTap

  • value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。
    on 事件绑定不会阻止冒泡事件向上冒泡，catch 事件绑定可以阻止冒泡事件向上冒泡。
  1. <view id="outter" onTap="handleTap1">
  2.   view1
  3.   <view id="middle" catchTap="handleTap2">
  4.     view2
  5.     <view id="inner" onTap="handleTap3">
  6.       view3
  7.     </view>
  8.   </view>
  9. </view>

上面代码中，点击 view3 会先后触发 handleTap3 和 handleTap2(因为 tap 事件会冒泡到 view2，而 view2 阻止了 tap 事件冒泡，不再向父节点传递)，点击 view2 会触发 handleTap2，点击 view1 会触发 handleTap1。

冒泡事件列表：

类型触发条件
touchStart触摸动作开始
touchMove触摸后移动
touchEnd触摸动作结束
touchCancel触摸动作被打断，如来电提醒，弹窗
tap触摸后马上离开
longTap触摸后，超过500ms再离开

其他事件不冒泡

（1）在组件中绑定一个事件处理函数。

如onTap，当用户点击该组件的时候会在该页面对应的Page中找到对应的事件处理函数。

  1. <view id="tapTest" data-hi="Alipay" onTap="tapName">
  2.   <view id="tapTestInner" data-hi="AlipayInner">
  3.     Click me! 
  4.   </view>
  5. </view>

（2）在相应的Page定义中写上相应的事件处理函数，参数是event。

  1. Page({
  2.   tapName(event) {
  3.     console.log(event)
  4.   }
  5. })

可以看到 log 出来的信息大致如下。

  1. {
  2.   "type": "tap",
  3.   "timeStamp": 13245456,
  4.   "target": {
  5.     "id": "tapTestInner",
  6.     "dataset": {
  7.       "hi": "Alipay"
  8.     },
  9.     "targetDataset": {
  10.       "hi": "AlipayInner"
  11.     }
  12.   },
  13.   "currentTarget": {
  14.     "id": "tapTest",
  15.     "dataset": {
  16.       "hi": "Alipay"
  17.     }
  18.   }
  19. }

事件对象

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

（1）BaseEvent

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

属性类型描述
typeString事件类型
timeStampInteger事件生成时的时间戳
targetObject触发事件的组件的属性值集合

（2）CustomEvent

CustomEvent自定义事件对象属性列表（继承BaseEvent）。

属性类型描述
detailObject额外的信息

（3）TouchEvent

TouchEvent触摸事件对象属性列表（继承BaseEvent）。

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

（4）Type

type：代表事件的类型。

（5）timeStamp

timeStamp：页面打开到触发事件所经过的毫秒数。

（6）target

target：触发事件的源组件。

属性类型描述
idString事件源组件的id
tagNameString当前组件的类型
datasetObject绑定事件的组件上由data-开头的自定义属性的集合
targetDatasetObject实际触发事件的组件上由data-开头的自定义属性的集合

dataset

在组件中可以定义数据，这些数据将会通过事件传递给逻辑层。

书写方式： 以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)，如data-element-type，最终会在event.target.dataset中会将连字符转成驼峰elementType。

示例代码：

  1. <view data-alpha-beta="1" data-alphaBeta="2" onTap="bindViewTap"> DataSet Test </view>
  1. Page({
  2.   bindViewTap:function(event){
  3.     event.target.dataset.alphaBeta === 1 // - 会转为驼峰写法
  4.     event.target.dataset.alphabeta === 2 // 大写会转为小写
  5.   }
  6. })

touches

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

（1）Touch 对象

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

（2）CanvasTouch 对象

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

（3）changedTouches

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

（4）detail

自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入信息，媒体的错误事件会携带错误信息，详细的描述请参考组件定义中各个事件的定义。

原文: https://docs.alipay.com/mini/framework/events