微信小程序事件之-bind、capture-bind、catch、capture-catch

lazy91

已于 2022-04-07 22:09:08 修改

阅读量4.8k

点赞数 4

分类专栏：微信小程序文章标签：微信小程序小程序

于 2022-04-07 17:50:55 首次发布

本文链接： https://blog.csdn.net/qq_59954212/article/details/124022229

版权

微信小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细讲解了小程序中事件绑定的写法，区分bind和catch事件，以及冒泡与非冒泡的区别。通过实例演示了如何控制事件冒泡，并介绍了捕获阶段的概念。核心内容包括事件绑定语法、冒泡与非冒泡事件处理和事件传递顺序。

摘要由CSDN通过智能技术生成

1、事件绑定

事件绑定的写法和组件属性一致，以key="value"的形式，其中：

key表示事件类型
- 以bind或者catch开头，跟上事件的类型，如bindtap、catchtouchstart 。
- bind 事件绑定不会阻止冒泡事件向上冒泡，catch 事件绑定阻止冒泡事件向上冒泡。
- 事件有冒泡阶段和捕获阶段。
- 自基础库版本1.5.0起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。
value是对应的函数名称，事件触发后执行该函数。

2、bind事件（冒泡）与catch事件（非冒泡）的区别

小程序中事件分为冒泡事件和非冒泡事件。

示例引用自：(3条消息) 微信小程序bind事件和catch事件区别_xiaoqiang_0719的博客-CSDN博客_微信小程序catch

本文以冒泡事件tap（手指触摸后马上离开，也就是点击事件）为例子来区别bind和catch事件。

bindtap 事件绑定不会阻止冒泡事件向上冒泡
catchtap 事件绑定可以阻止冒泡事件向上冒泡

假如有三个view点击事件都是用的bindtap，三个view是层级包含关系

.wxml文件：

<view id="outer" bindtap="out">
 
         outer view
 
    <view id="middle" bindtap="middle">
 
         middle view
 
       <view id="inner" bindtap="inner">
 
        inner view
 
       </view>
 
   </view>
 
</view>

.js 文件：

out:function(e){
 
     console.log("--out bindtap click")
 
}, middle: function (e) {
 
     console.log("--middle bindtap click")
 
}, inner: function (e) {
  
     console.log("--inner bindtap click")
 
}

点击out view打印出一条log ，--out bindtap click

点击middle view打印出两条log， --middle bindtap click --out bindtap click

点击innew view打印出三条log，--inner bindtap click --middle bindtap click --out bindtap click

可以看出bindtap不阻止向上冒泡，所以点击inner一直冒泡到了最外层。

如果我们只修改 middle view的bindtap为catchtap

点击out view打印出一条log ，--out bindtap click （因为没有上层元素故而无法向上冒泡）

点击middle view打印出一条log， --middle bindtap click （catchtap阻止向上冒泡）

点击innew view打印出两条log，--inner bindtap click --middle bindtap click （catchtap阻止向上冒泡）

3、冒泡阶段与捕获阶段？

事件传递有两种方式：冒泡与捕获。事件传递定义了元素事件触发的顺序。

如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。冒泡：由内及外。

在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发，然后再触发 <p> 元素的点击事件。

在bind 、catch之前加capture表示捕获阶段。故，有：

bind 冒泡事件、冒泡阶段
capture-bind 冒泡事件、捕获阶段
catch 非冒泡事件、冒泡阶段
capture-catch 非冒泡事件、捕获阶段

示例：

在下面的代码中，点击 inner view 会依次调用handleTap2、handleTap4、handleTap3、handleTap1。

解析：

bind 事件不会阻止冒泡事件向上冒泡，故点击 inner view 会向上调用 outer view 的事件；
捕获阶段在冒泡阶段之前，故handleTap2、handleTap4 在 handleTap3、handleTap1 之前；
捕获阶段，父元素——>子元素，handleTap2 在 handleTap4 之前；
冒泡阶段，子元素——>父元素， handleTap3 在 handleTap1 之前。
综上：依次调用handleTap2、handleTap4、handleTap3、handleTap1。

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>