事件

什么是事件？

• 事件是视图层到逻辑层的通讯方式。

• 事件可以将用户的行为反馈到逻辑层进行处理。

• 事件可以绑定在组件上，当达到触发条件，就会执行逻辑层中对应的事件函数。

• 事件对象可以携带额外信息，如 id, dataset, touches。

使用方式

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

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

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

事件绑定的写法同组件的属性，为 key、value 的形式。

• key 以 on 或 catch 开头，再加上事件的类型，如 onTap、catchTap。

• value 是一个字符串，需要在对应的 Page 中定义同名的函数。否则当触发事件时会报错。

on 事件绑定不会阻止冒泡事件向上传递，catch 事件绑定可以阻止冒泡事件向上传递。

<view id="outter" onTap="handleTap1">
  view1
  <view id="middle" catchTap="handleTap2">
    view2
    <view id="inner" onTap="handleTap3">
      view3
    </view>
  </view>
</view>

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

冒泡事件列表：

其他事件则不冒泡：

• 在组件中绑定一个事件处理函数。

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

  <view id="tapTest" data-hi="Alipay" onTap="tapName">
  <view id="tapTestInner" data-hi="AlipayInner">
    Click me!
  </view>
  </view>

• 在相应的 Page 定义中写上相应的事件处理函数，参数是 event：

  Page({
  tapName(event) {
    console.log(event)
  }
  })

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

  {
  "type": "tap",
  "timeStamp": 13245456,
  "target": {
    "id": "tapTestInner",
    "dataset": {
      "hi": "Alipay"
    },
    "targetDataset": {
      "hi": "AlipayInner"
    }
  },
  "currentTarget": {
    "id": "tapTest",
    "dataset": {
      "hi": "Alipay"
    }
  }
  }

事件对象

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

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

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

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

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

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

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

• Type：事件的类型。

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

• target：触发事件的源组件。

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

dataset

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

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

代码示例：

<view data-alpha-beta="1" data-alphaBeta="2" onTap="bindViewTap"> DataSet Test </view>

Page({
  bindViewTap:function(event){
    event.target.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.target.dataset.alphabeta === 2 // 大写会转为小写
  }
})

touches

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

• Touch 对象

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

• CanvasTouch 对象

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

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

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