《微信小程序-基础篇》小程序中的事件与冒泡

大家好，这是小程序系列的第八篇文章，这应该是基础篇的最后几篇文章了，下面就是要开始分享一些组件的具体设计与实现，为后面的项目实战做准备了：
1.《微信小程序-基础篇》带你了解小程序的路由系统（二）
2.《微信小程序-基础篇》带你了解小程序中的生命周期（一）
3.《微信小程序-基础篇》带你了解小程序中的生命周期（二）
这一篇文章分享的是关于小程序中事件相关的内容，介绍完基础以后会实际同步开发一个微信小程序的项目并开源，项目的主题暂定是原神的资料站~~~
——
最后，求关注，求收藏，求点赞，这是一个系列文章，建议专栏收藏，肯定分享的都是跟小程序相关的，旨在能提高在小程序中的能力，谢谢～
——
无锡又有疫情了，希望早日过去，加油～

前言

小程序中的 事件机制和Vue2中的用法大同小异，因此，如果你了解Vue的话那本章节几乎没有任何难度，我们知道，在前端领域中一般都会说HTML是骨架，CSS是装饰，而 JavaScript则是用来执行交互，小程序中同样如此，它的 事件机制与语法其实是完全遵循JavaScript的，下面我们就开始一一分享；
耐心看完，你一定有所收获～～

阅读对象与难度

本文难度属于：初级，适合 初学小程序的开发者，通过本文，你可以了解到 小程序中的事件是什么，如何 执行事件 以及 当事件冒泡时有什么具体应用 ，大致思维导图如下：

什么是事件

首先，我们先来聊一下 什么是事件，其实之前有的文章中我们已经有点说到了，我们来看一下官方的说明吧，下面这段介绍来自于Mozilla，地址如下：事件介绍

事件是您在编程时系统内发生的动作或者发生的事情，系统响应事件后，如果需要，您可以某种方式对事件做出回应。例如：如果用户在网页上单击一个按钮，您可能想通过显示一个信息框来响应这个动作。

简单的说，一个事件就是一个操作，这个操作可以是用户触发的，也可以是系统自动触发，比如点击一个按钮，这个 点击 可以视为一个操作也就是一个事件，比如我们小程序广告业上的倒计时，倒计时结束后自动跳转到首页，这个 跳转可以视为一个操作 ，倒计时也可以视为一个操作 ，和点击操作不同的是，这个操作是系统自动完成的，期间不需要用户参与，它自己就可以执行；
看到这里，相信你对什么是事件应该有点明白了吧～看了个例子吧，点击按钮后跳转页面到日志页

事件

事件不被捕获，那么事件就没有任何意义，什么意思呢？比如按钮上存在一个点击事件，但是当用户点击了这个按钮后小程序怎么知道你点了？所以这个就需要一个捕获机制，在小程序中事件捕获一共有三种种，分别对应的关键词为：bind 和 catch，以及2.8.2后新出的 mut-bind，

基本使用规则

使用方法还是比较简单的，就是使用:关键词+冒号+事件名组合，比如bind:tap，实际例子如下

<t-button bind:tap="handleClick">点击跳转到日志页</t-button>

这里的 bind 就是上面捕获的其中一个关键词，后面的tap是事件名字，在小程序中 tap代表的是点击事件，约等于web中的click事件，bind:tap 连起来就是要小程序系统来捕获这个button上的点击事件，后面的handleClick则是回调函数，意思是一旦捕获到点击事件，就会执行handleClick这个回调函数，如果我们在回调函数中写上跳转，那么当触发点击事件后会执行跳转，如果想要了解路由跳转，可以查看博主的另外一篇文章《《微信小程序-基础篇》带你了解小程序的路由系统（一）》

// pages/welcome.ts
Page({
  handleClick(){
    wx.redirectTo({
      url: '../logs/logs'
    })
  },
})

关键词

上面说到捕获事件的关键词一共有三个，分别是：bind、catch 以及 mut-bind，用法规则是一摸一样的，如下示例

<!-- bind的用法 -->
<t-button bind:tap="handleClick">点击跳转到日志页</t-button>

<!-- catch的用法 -->
<t-button catch:tap="handleClick">点击跳转到日志页</t-button>

<!-- mut-bind的用法 -->
<t-button mut-bind:tap="handleClick">点击跳转到日志页</t-button>

如果还不大清楚的话，看截图，如下：

bind和catch的区别

可能会有小伙伴问为什么没有mut-bind，怎么说呢，实际上bind和catch是一对，而mut-bind是因为小程序官方为了解决某些问题而推出的一种新的机制，这个机制我们下面在说，这里先比对bind和catch；
bind和catch最大的区别只有一个，那就是冒泡，bind绑定的事件会向上冒泡，catch绑定的事件则不会，它会阻止冒泡，可能有小伙伴不大明白冒泡，这里简单说一下吧

冒泡

首先说明，这是一种 存在于window中的一种机制，它像是在水中的气泡会向上浮一样，看个图例

现在假设DOM的结构有这么几层，并且都绑定了点击事件，那么如果点击view，由于冒泡的规则，body，html，document上绑定的同时会被触发，实际看下代码的演示吧

<!--pages/welcome.wxml-->
<view bind:tap="bindEvent1">
  <view bind:tap="bindEvent2">
    <view bind:tap="bindEvent3">测试冒泡事件</view>
  </view>
</view>

// pages/welcome.ts
Page({
  bindEvent1(){
    console.log("----- 最外层的事件 -----")
  },
  bindEvent2(){
    console.log("----- 中间层的事件 -----")
  },
  bindEvent3(){
    console.log("----- 最里层的事件 -----")
  },
})

以这段代码为例，如果 点击“测试冒泡事件”的文字 ，哪个打印会生效，按理说点击了最里面那个，那么只会打印：最里层的事件，这个文字，看下结果吧

实际结果是三个都被打印了，这也就代表了实际上这三个函数都被触发了，这个就是冒泡，现在能又点明白了吧，冒泡的意思就是说他能将事件一层一层往上触发，那么能不能阻止这个冒泡呢，那肯定是可以的
只要使用catch作为关键词，那么冒泡就会被中止，不再往上层传递，修改一下示例代码

<!--pages/welcome.wxml-->
<view bind:tap="bindEvent1">
  <view catch:tap="bindEvent2">
    <view bind:tap="bindEvent3">测试冒泡事件</view>
  </view>
</view>

如果改成这样，那么会打印几个结果，猜测一下：由于将中间层的关键词改成了catch，那么最外层肯定就不会被触发了，最里层肯定是会被触发的，就是不确定中间层会不会被触发，测试一下

答案是：会触发，中间层被触发后由于catch的原因会将冒泡阻止，使之不再往上传递；

mut-bind互斥事件

现在我们再来说下mut-bind，它是自2.8.2版本后，微信官方在基础库中新加入的一个绑定规则，叫做 互斥事件，其实挺好理解的，就是不管嵌套多少层，在冒泡体系中只有最近一个mut-bind事件会被触发，看个例子

<view id="outer" mut-bind:tap="handleTap1">
  outer view
  <view id="middle" bind:tap="handleTap2">
    middle view
    <view id="inner" mut-bind:tap="handleTap3">
      inner view
    </view>
  </view>
</view>

按照定义的说法，如果 点击inner view，那么只会打印最里层和中间层的日志，最外层的由于mut-bind只触发一个，会被过滤掉，我们实验一下

没毛病，符合预期～

事件列表

如同上一节的 点击事件tap，小程序官方提供了很多事件，具体的可以查看小程序官方网站的说明，地址如下：普通事件绑定，其中有几个还是比较重要的，单独列一下

事件名	说明
touchstart	手指触摸动作开始触发回调函数
touchmove	手指触摸后移动，也就是说手指移动触发回调函数
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开，就是约等于web端的点击事件
longtap	手指触摸后，超过350ms再离开（推荐使用 longpress 事件代替），简单的说就是长按事件
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发

小结

在本文中，我们了解了什么是事件，以及与事件对于的几个捕获机制，bind、catch以及mut-bind，机制与事件名之间的使用规则是，关键词:事件名，比如bind:tap，这代表绑定了一个tap事件；
bind、catch最大的区别是bind支持冒泡，catch会阻止冒泡，而mut-bind这是小程序官方在2.8.2新加入的一个互斥事件，它代表在整理 冒泡的链路里只会触发一次；