微信小程序（事件处理）

1.什么是事件：

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

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

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

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

2.事件的使用方式：

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

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

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

注意：在有些时候，会出现点击一次tapName事件，会出现两次或者多次，这个时候的解决办法是完全关闭微信web开发者工具之后再重新启动就好了。

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

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

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

{
"type":"tap",
"timeStamp":895,
"target": {
"id": "tapTest",
"dataset":  {
"hi":"WeChat"
}
},
"currentTarget":  {
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
"detail": {
"x":53,
"y":14
},
"touches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}],
"changedTouches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}]
}

3.事件分类

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

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

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

4.事件绑定

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

key 以 bind 或 catch 开头，然后跟上事件的类型，如 bindtap , catchtouchstart

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

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

如在下边这个例子中，点击 inner view 会先后触发 handleTap3 和 handleTap2 (因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发 handleTap2 ，点击 outter view 会触发 handleTap1 。

<view id="outter" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>