入门微信小程序开发(四)理解小程序事件与冒泡机制

一.初识小程序事件

在小程序中，事件是视图层到逻辑层的通讯方式。

比如，我们可以将事件绑定在组件上，当用户操作该组件并触发事件时，事件会将用户行为反馈到逻辑层做处理，也就是对应的执行逻辑层中的事件处理函数。

当然，有时候行为反馈不一定是由用户来主动触发，举个生活中的例子，我们在腾讯视频看龙岭迷窟时，当播放到一集结尾，视频会自动播放下一集。将这个例子拿到小程序中来说，video组件便自带了bindended事件，只要视频播放到末尾便会触发该事件，小程序中存在很多由组件自身提供的事件，所以综合来说，小程序中的事件由用户行为反馈事件和组件状态反馈事件两部分组成。

微信小程序除了WXML，WXSS文件之外，还提供了WXS脚本语言，为什么突然扯到这个呢，因为从基础库版本2.4.4开始，支持使用WXS响应事件。针对于IOS环境，WXS脚本执行速度是JavaScript的2-20倍，安卓环境没啥差别，大体上来理解，用WXS解决事件问题具备一定优势。由于我们目前暂未了解WXS脚本，所以这里先不做探讨，后面会专门另起一篇文章介绍WXS脚本以及事件相关说明。学习总不能一口吃成胖子，我们一步步来。

所以本文还是主要围绕用户行为反馈事件展开讨论，让大家对于事件先有个基本概念。

还记得上篇文章中我们接触的第一个点击事件tap吗？我们来重现它，并以此加深对于事件的理解、

首先，我们在index.wxml中与index.js中添加如下代码：

<button bindtap="alert">bindtap</button>

Page({
  data: {},
  alert: function (event) {
    wx.showToast({
      title: '触发成功', // 标题
      icon: 'success', // 图标类型，默认success
      duration: 1500 // 提示窗停留时间，默认1500ms
    })
  }
})

有上述例子可知，实现一个事件绑定主要分为两步，第一步我们通过bindtap绑定了一个函数alert，第二我们在Page构造器中定义对应的事件处理函数alert。当户点击button组件时，该组件就会在Page中找到对应的事件函数并执行，这便是一次视图到逻辑的通讯过程。

需要注意的是，此时我们使用的事件是tap，bind只是一个事件前缀，这就像我们用原生JS事件时所有事件前都得加一个on，比如onclick，onchange，这是同一个道理。

除此之外，小程序中的事件支持bindtap与bind:tap两种写法，怎么用都行。

<button bindtap="alert">bindtap</button>
<button bind:tap="alert">bindtap</button>

好了，在了解了事件基本概念后，我们来一一介绍小程序中提供的用户交互事件。

由于大部分事件均与手指触碰有关，所以为了大家更好的感受各个事件的作用，这里我推荐大家开启小程序调试器的自动预览，如下

点击编译并预览后，登陆的微信账号即可预览我们的小程序项目，如果你修改了代码，记得手动点一次编译并预览按钮。

二.常见事件类型

注意，这里的事件类型均为用户行为反馈事件，相关说明直接引用官网，有个小规律，小程序中所有事件名均为小写单词拼接，无驼峰拼接情况，这点大家记住。

事件类型	触发条件
touchstart	手指触摸动作开始触发
touchmove	手指触摸后移动触发
touchcancel<