1.微信小程序实战开发（一）：微信小程序简介
2.微信小程序实战开发（二）：小程序基本目录结构讲解
3.微信小程序实战开发（三）：小程序视图容器（view container）
4.微信小程序实战开发（四）：组件的基本使用讲解
5.微信小程序实战开发（五）：数据绑定讲解
6.微信小程序实战开发(六)：渲染标签的使用
7.微信小程序实战开发 （七）:样式模板的使用
关于小程序事件微信官方的文档如下：【传送门】
我们今天主要从以下几个方法来介绍一下：微信小程序事件。
一、什么是事件?
- 事件是视图层到逻辑层的通讯方式。
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息，如 id, dataset, touches。
1.一种用户的行为用户长按某一张图片，点击某个按钮，这就是用户的行为，也是事件
2.一种通讯方式
为什么说事件也是一种通讯方式呢？因为用户点击按钮的时候，这是发生在UI层的，我们的UI要把一些信息发送给我们的逻辑代码，因此也是一种通讯方式
二、事件的类别
1.点击事件tap
2.长按事件longtab
3.触摸事件
（1）touchstart 开始触摸
（2）touchend 结束触摸
（3）touchmove 移动触摸
（4）touchcancel取消触摸
这里就有个问题了，结束触摸和取消触摸有什么区别吗？
结束触摸可以理解为是主动的停止的触摸事件，比如我们正在移动一张图片，移动完成后就是结束触摸了，然后可能在移动的过程中，突然有事件来打断了触摸事件，比如电话来了，打断了你的触摸事件，这时候就是取消触摸了
4.其他的触摸事件 submit
实际上每个控件都有自己独特的事件。
三、事件冒泡
1.首先我们先修改下启动界面，启动界面创建三个view组件，分别给他们对应的样式和绑定他们的点击事件，且布局是一层嵌套一层的。
.wxss的代码
- /**index.wxss**/
- .view1 {
- height: 500px;
- width: 100%;
- background-color: cyan;
- }
- .view2 {
- height: 300px;
- width: 80%;
- background-color: orange;
- }
- .view3 {
- height: 200px;
- width: 60%;
- background-color: red;
- }
再到.js文件下定义这个三个点击事件，代码如下：
保存编译 上述代码并点击视图3可以查看结果：
截图不明显，我们可以看动态图就比较清楚：
仔细观察可以看到，我们点击界面3的时候，控制台输出了3行，分别是clickView1，clickView2，clickView3的点击事件，点击界面2的时候，控制台输出了clickView2和clickView1，这就说明了点击子view的时候，也会响应父view的事件，这就是冒泡事件了，相反的，点击子view，父view不会响应点击事件，这就是非冒泡事件了。
事件分为冒泡事件和非冒泡事件：
- 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
- 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
那么冒泡事件有哪些呢？
上面所提到的点击事件，长按事件，触摸事件都是冒泡事件，其余的都是非冒泡事件！
四、事件的绑定事件的绑定方式有两种：bind和catch。在上面的实例当中我们已经用过bind了，那么catch绑定事件和bind的绑定事件有什么不同呢？我们先来实例，最后在再来总结。
首先，我们将刚才实例中的view3改为catch绑定看一下效果：
- <view class="view1" bindtap="clickView1">
- 界面1
- <view class="view2" bindtap="clickView2">
- 界面2
- <view class="view3" catchtap="clickView3">
- 界面3
- </view>
- </view>
- </view>
通过上面的实例，大家应该比较清楚bind和catch的区别了吧？bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
五、事件的对象
如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。我们还是从刚才的实例进行讲解。
.wxml
- <view class="view1" bindtap="clickView1">
- 界面1
- <view class="view2" bindtap="clickView2">
- 界面2
- <view class="view3" bindtap="clickView3">
- 界面3
- </view>
- </view>
- </view>
我们在.wxss页面稍作修改，在事件被执行的时候会将事件传递进来，我们在函数内将事件打印出来：
- clickView1: function(event) {
- console.log("clickView1")
- console.log(event)
- },
- clickView2: function() {
- console.log("clickView2")
- },
- clickView3: function(event) {
- console.log("clickView3")
- console.log(event)
- },
当我们点击视图3时，我们看到事件被打印出来，如下图所示：
我们从打印出来的数据可以看出里面有绑定事件的对象（object），我们先来了解一些这些对象：
1.type：代表事件的类型。（本例中是tap类型）
2.timeStamp：页面打开到触发事件所经过的毫秒数。
3.target：触发事件的源组件。
[td]属性 | 类型 | 说明 |
| id | String | 事件源组件的id |
| tagName | String | 当前组件的类型 |
| dataset | Object | 事件源组件上由data-开头的自定义属性组成的集合 |
属性 | 类型 | 说明 |
| id | String | 当前组件的id |
| tagName | String | 当前组件的类型 |
| dataset | Object | 当前组件上由data-开头的自定义属性组成的集合 |
说明：为了更好的对比 target 和 currentTarget 。我们给每个view组件加上id后再重新看一下效果。
- <view class="view1" bindtap="clickView1" id="view1">
- 界面1
- <view class="view2" bindtap="clickView2" id="view2">
- 界面2
- <view class="view3" bindtap="clickView3" id="view3">
- 界面3
- </view>
- </view>
- </view>
我们仔细查看一下点击view3时，clickView3打印出来的event：
再来对比一下clickView1打印出来的log：
通过clickView的打印我们可以很明显的看出来，currenttarget是当前打印的事件组件，而target是触发事件的源组件。
5.dataset：在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。 书写方式： 以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.target.dataset 中会将连字符转成驼峰elementType。我们也来举例看一下：
- <view class="view1" bindtap="clickView1" id="view1" data-title="51小程序头条" data-id="100">
- 界面1
- <view class="view2" bindtap="clickView2" id="view2">
- 界面2
- <view class="view3" bindtap="clickView3" id="view3">
- 界面3
- </view>
- </view>
- </view>
我们直接点击视图3看看打印结果如下：
通过这样的方式，我们就可以很方便的获取控件相应的属性，得到这锅属性后，我们就可以很方便的实现我们的逻辑。实际上dataset的非常的实用，以后会经常用到。
爱盈利（aiyingli.com）移动互联网最具影响力的盈利指导网站。定位于服务移动互联网创业者，移动盈利指导。我们的目标是让盈利目标清晰可见！降低门槛，让缺乏经验、资金有限的个人和团队获得经验和机会，提高热情，激发产品。
