小程序系列的第八篇文章，你了解多少？

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

小程序系列的第八篇文章，你了解多少？

1.《微信小程序-基础》带你了解小程序的路由系统（二）

2.《微信小程序-基础知识》带你了解小程序的生命周期（一）

3.《微信小程序-基础知识》带你了解小程序的生命周期（二）

本文分享小程序中事件相关的内容。 介绍完基础知识后，我们实际上会同时开发一个微信小程序项目并开源。 项目主题暂定为原神数据站~~~

——

*后，请大家关注、收藏、点赞。 这是一个系列文章。 建议收集列。 我相信分享的东西都是与小程序相关的，旨在提高小程序的能力。 谢谢~

——

无锡又爆发疫情了。 我希望它很快就会过去。 来吧~

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

前言

小程序中的事件机制与Vue2中的用法类似。 因此，如果你了解Vue，这一章几乎不难。 我们知道，在前端领域，一般都说HTML是骨架，CSS是装饰，用 来进行交互，在小程序中也是如此。 它的事件机制和语法实际上是完全遵循的。 下面开始一一分享；

只要你耐心读完，一定会有收获的~~

阅读对象及难度

本文难度级别为：初级，适合刚接触小程序开发。 通过这篇文章，你可以了解小程序中的事件是什么，事件如何执行，以及事件冒泡时具体使用了哪些应用。 总体思维导图如下：

什么是事件

首先我们先来说一下什么是事件。 其实我们在之前的一些文章中已经提到过。 我们来看看官方的描述。 以下介绍来自以下地址：

事件是编程时系统内发生的动作或事件。 系统响应事件后，如果需要，您可以通过某种方式响应该事件。 例如：如果用户单击网页上的按钮，您可能希望通过显示信息框来响应此操作。

简单来说，事件就是一个操作。 该操作可以由用户触发，也可以由系统自动触发，例如点击按钮。 这个点击可以看成是一次操作，或者是一个事件，比如我们小程序广告行业。 倒计时，倒计时结束后会自动跳转到首页。 这个跳转可以看成是一个操作，倒计时也可以看成是一个操作。 与点击操作不同的是，该操作由系统自动完成，期间不需要用户参与。 您可以自己执行；

看完这里，相信你应该对什么是事件有了一点了解了。 看一个例子。 点击按钮跳转到日志页面。

事件

如果事件没有被捕获，那么该事件就没有意义。 这是什么意思？ 比如按钮上有一个点击事件，但是当用户点击按钮时，小程序怎么知道你点击了呢？ 所以这就需要一个捕获机制。 小程序中的事件捕获分为三种类型。 对应的关键字是：bind和catch，以及2.8.2之后新增的mut-bind。

基本使用规则

使用方法比较简单，只需使用：关键字+冒号+事件名组合，如bind:tap，实际示例如下

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

这里的bind就是上面抓到的关键字之一，后面的tap就是事件名称。 小程序 tap代表点击事件，大致相当于网页中的点击事件。 bind:tap的组合需要小程序系统来捕获。 在这上面的点击事件后面跟着一个回调函数，也就是说一旦捕获了点击事件，这个回调函数就会被执行。 如果我们在回调函数中写一个跳转，那么当点击事件触发时就会执行跳转。 如果你想了解路由跳转，可以查看博主的另一篇文章《微信小程序-基础知识》带你了解小程序的路由体系（一）》

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

关键词

上面提到了捕获事件有3个关键字，分别是：bind、catch和mut-bind。 使用规则完全相同，如下例所示

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

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

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

如果还不清楚，请看截图，如下：

绑定和捕获的区别

有的朋友可能会问为什么没有mut-bind。 我该怎么说呢？ 其实bind和catch是一对，而mut-bind是小程序官方为了解决某些问题推出的新机制。 这个机制我们下面会讲到，不过这里先对比一下bind和catch；

bind和catch*大的区别只有一个，那就是冒泡。 由bind绑定的事件会冒泡小程序系列的第八篇文章，你了解多少？，但由catch绑定的事件不会。 它将防止起泡。 有些朋友可能不太理解冒泡。 这里简单说一下

气泡

首先，这是水中存在的一种机制。 就像水中的气泡向上漂浮一样。 请参阅插图。

现在假设 DOM 结构有这么多层，并且单击事件与它们绑定。 那么如果点击视图，由于冒泡规则，body、html、绑定会同时触发。 我们来看一下实际的代码演示。

<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作为关键字，冒泡就会停止，不再向上层传递。 修改示例代码。

<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>

根据定义，如果点击内层视图，则只会打印*内层和中间层的日志。 由于mut-bind只触发一个，所以*外层会被过滤掉。 我们来实验一下。

没什么问题，符合预期~

活动列表

就像上一节的点击事件tap一样，小程序官方提供了很多事件。 详情可以查看小程序官网的说明。 地址如下： 有些是比较重要的，单独列出来。

事件名称 描述

手指触摸动作开始触发回调函数

手指触摸后发生移动，表示手指移动触发回调函数

手指触摸操作被打断，例如来电提醒、弹窗等。

手指触摸动作结束

轻敲

手指触碰后立即离开，大致相当于Web端的点击事件。

手指接触后，超过350ms后离开（建议使用事件代替）。 简单来说，就是一次长按事件。

手指接触后，超过350ms后离开。 如果指定了事件回调函数，并且触发了该事件，则不会触发tap事件。

概括

在这篇文章中，我们了解了什么是事件，以及与事件相关的几种捕获机制，bind、catch 和 mut-bind。 机制和事件名称的使用规则是，关键字：事件名称，如bind:tap，表示绑定tap事件；

bind和catch*大的区别在于bind支持冒泡，catch会阻止冒泡，而mut-bind是小程序在2.8.2正式添加的一个新的互斥事件。 意味着只能整理出冒泡链接。 会触发一次；

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等