小程序事件之bind 、catch 、capture-bind和capture-catch的区别

kif

发布于 2023-02-27 17:48:29

6260

发布于 2023-02-27 17:48:29

文章被收录于专栏：kifroomkifroom

小程序事件之bind 、catch 、capture-bind和capture-catch的区别

事件分类

事件分为冒泡事件和非冒泡事件

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

事件的绑定：

bind和catch都是用来绑定事件的，与 bind 不同， catch 会阻止事件向上冒泡

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

上例中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1

事件的捕获阶段

\1. 事件是有两个阶段的：捕获阶段和冒泡阶段，且捕获阶段位于冒泡阶段之前。

\2. 在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反

\3. 在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段

示例：

点击 inner view 会先后调用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>

如果把上面的代码改成如下，将只会触发handleTap2

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

转载自：

https://www.cnblogs.com/hzhuxin/p/15074300.html

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-05-22 ，如有侵权请联系 cloudcommunity@tencent.com 删除

bind