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

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。

解析：

1. bind 事件不会阻止冒泡事件向上冒泡，故点击 inner view 会向上调用 outer view 的事件；
2. 捕获阶段在冒泡阶段之前，故handleTap2、handleTap4 在 handleTap3、handleTap1 之前；
3. 捕获阶段，父元素——>子元素，handleTap2 在 handleTap4 之前；
4. 冒泡阶段，子元素——>父元素， handleTap3 在 handleTap1 之前。
5. 综上：依次调用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>

4、总结：