微信小程序入门四：视图层事件

一、事件机制

在微信官方定义的事件概念如下：

什么是事件

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

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

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

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

1.1 事件绑定

在wxml的标签中进行事件绑定主要有两种方式：bind+事件名 或者 touch+事件名

1）、bind

bind+事件名可以绑定一个事件处理函数，函数传入参数即为事件对象

示例

<view id="tapTest" data-say="hello" bindtap="showMe"> 点击输出 </view>

如上，通过bindtap，绑定一个触摸点击事件，tap为小程序封装的一个事件名

在Page函数的参数中，定义对应的事件响应函数

id，dataset，touches是事件对象携带的信息

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

这里的事件对象是小程序包装过的对象，其中常用的是currentTarget属性，输出如下：

"currentTarget":  {
"id": "tapTest",
"dataset": {
"hi":"hello"
}
},
"touches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}],

说明：

dataset中存放了在标签中通过data-自定的属性值 key即为data-中*定义的内容，value即为对应的值

touches:中存放了事件触发的具体信息

1.2 catch

catch+事件名 ：是绑定事件的另一种方法

<view id="target1" catchTap="handleTap1">触摸事件</view>

Page({
handleTap1:function(e){
console.log(e)
}
})

1.3 catch和bind的区别

二者都用于绑定事件，但bind不能阻止事件冒泡，而catch方法可以阻止事件冒泡

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

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

冒泡事件：touchstart,touchmove,touchcancel,touchend,tap,longtap

1.4 事件对象

Page({
handleTap1:function(e){
console.log(e)
}
})

如上：打印出的事件对象具有多个属性

type:事件类型，timeStamp：事件时间戳，target：事件源 currentTarget:事件绑定的组件