事件
什么是事件
- 事件是视图层到逻辑层的通讯方式。
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息，如 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
}
]
}
具体参数下面我会介绍
事件详解
事件分类
事件分为冒泡事件和非冒泡事件：
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
冒泡事件：
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）。