小程序开发之视图层WXML绑定事件

事件

什么是事件

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

事件的使用方式

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

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

例如：
index.html

<view id="tapTest" data-hi="WeChat" bindtap="tapName">点击事件</view>

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

index.js

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

log日志出来的信息大致如下：

{
  "type": "tap",            //事件类型
  "timeStamp": 895,         //事件生成时的时间戳
  "target": {               //触发事件的组件的一些属性值集合(触发事件的源组件)
    "id": "tapTest",        //事件源组件的id
    "dataset": {            //事件源组件上由data-开头的自定义属性组成的集合
      "hi": "WeChat"       
    }
  },
  "currentTarget": {        //当前组件的一些属性值集合
    "id": "tapTest",        //当前组件的id
    "dataset": {            //当前组件上由data-开头的自定义属性组成的集合
      "hi": "WeChat"
    }
  },
  "detail": {               //自定义事件所携带的数据
    "x": 53,
    "y": 14
  },
  "touches": [              //touches 是一个数组，表示当前停留在屏幕上的触摸点。
    {
      "identifier": 0,      //触摸点的标识符
      "pageX": 53,          //文档的左上角为原点 ，横向为X轴，纵向为Y轴
      "pageY": 14,
      "clientX": 53,        //距离可显示区域（除去导航条）左上角距离，横X轴，纵Y轴
      "clientY": 14
    }
  ],
  "changedTouches": [       //表示有变化的触摸点，其他同上
    {
      "identifier": 0,
      "pageX": 53,
      "pageY": 14,
      "clientX": 53,
      "clientY": 14
    }
  ]
}

具体参数下面我会介绍

事件详解

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

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

冒泡事件：

WXML的冒泡事件列表：

注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件。

非冒泡事件：

<form/>的submit事件，
<input/>的input事件，
<scroll-view/>的scroll事件，(详见各个组件)

例如：

<view touchstart="触摸开始" touchmove="触摸移动" touchcancel="触摸被打断" touchend="触摸结束">事件类型</view>

<view tap="单击" longpress="触摸超过350ms离开" longtap="触摸超过350ms离开" >事件类型</view>

<view transitionend="动画结束后触发" animationstart="动画开始时触发" animationiteration="一次迭代结束时触发" animationend="会在一个 WXSS animation 动画完成时触发">事件类型</view>

<view touchforcechange="3Dtouch">事件类型</view>

事件绑定和冒泡

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

• key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0 起，在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。
• value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

注：bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

例如：点击 视图1 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到视图2，而 视图2的catchtap 阻止了 tap 事件冒泡，不再向父节点传递)，
点击 视图2 会触发handleTap2，不会触发视图1
点击 视图3 会触发handleTap1。

<view id="outer" bindtap="handleTap1">
  视图3（最下层）
  <view id="middle" catchtap="handleTap2">
   视图2（中间层）
    <view id="inner" bindtap="handleTap3">视图1（最上层）</view>
  </view>
</view>

事件的捕获阶段

自基础库版本 1.5.0 起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。
在下面的代码中，
点击视图1 会先后调用handleTap2、handleTap4、handleTap3、

handleTap1。
<view
  id="outer"
  bind:touchstart="handleTap1"
  capture-bind:touchstart="handleTap2"
>
  视图2（下层）
  <view
    id="inner"
    bind:touchstart="handleTap3"
    capture-bind:touchstart="handleTap4"
  >
    视图1（上层）
  </view>
</view>

如果将上面代码中的第一个capture-bind改为capture-catch，将只触发handleTap2。

<view
  id="outer"
  bind:touchstart="handleTap1"
  capture-catch:touchstart="handleTap2"
>
  视图2（下层）
  <view
    id="inner"
    bind:touchstart="handleTap3"
    capture-bind:touchstart="handleTap4"
  >
    视图1（上层）
  </view>
</view>

事件对象

如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。
BaseEvent 基础事件对象属性列表：

解析:

type

代表事件的类型。

timeStamp

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

target

触发事件的源组件。

currentTarget

事件绑定的当前组件

说明： target 和 currentTarget 可以参考上例中，点击 视图1时，handleTap3 收到的事件对象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件对象 target 就是 inner，currentTarget 就是 middle。

dataset

在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。 书写方式： 以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。
index.wxml

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap">
  DataSet Test
</view>
index.js
bindViewTap(event) {
    event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  }

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

detail

自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。
点击事件的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。

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

特殊事件： 中的触摸事件不可冒泡，所以没有 currentTarget。

touches

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

Touch 对象

CanvasTouch 对象

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