微信小程序 事件分类

Question

冒泡事件

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

非冒泡事件

当一个组件上的事件被触发后，该事件不会向父节点传递。除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件。

事件绑定

普通事件绑定

<view bindtap="handleTap">      //page 构造器里面定义的函数
    Click here!
</view>

<view bindtap="{{ handlerName }}">      //this.data.handlerName 是一个字符串，指定事件处理函数名
    Click here!
</view>

阻止事件冒泡

catch 会阻止事件向上冒泡

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

互斥事件绑定

• 使用 mut-bind 来绑定事件。
• 一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发。
• 换而言之，所有 mut-bind 是 互斥 的，只会有其中一个绑定函数被触发。同时，它完全不影响 bind 和 catch 的绑定效果。

<view id="outer" mut-bind:tap="handleTap1">     //1
outer view
<view id="middle" bindtap="handleTap2">   //2 1
  middle view
  <view id="inner" mut-bind:tap="handleTap3">     //3 2
    inner view
  </view>
</view>
</view>

捕获阶段触发事件

capture-bind ---> 捕获阶段绑定 capture-catch ---> 捕获阶段绑定并阻止进一步捕获和全部的冒泡

<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>
//2 4 3 1

<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>
</view>
//2