大家好，这是小程序系列的第八篇文章，这应该是基础篇的最后几篇文章了，下面就是要开始分享一些组件的具体设计与实现，为后面的项目实战做准备了：
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，小程序官方提供了很多事件，具体的可以查看小程序官方网站的说明，地址如下：普通事件绑定，其中有几个还是比较重要的，单独列一下文章来源：https://www.toymoban.com/news/detail-484168.html
| 事件名 | 说明 |
|---|---|
| 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新加入的一个互斥事件，它代表在整理 冒泡的链路里只会触发一次；文章来源地址https://www.toymoban.com/news/detail-484168.html
到了这里，关于《微信小程序-基础篇》小程序中的事件与冒泡的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
