事件与冒泡 --（微信小程序）

1、事件分类

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

2、事件绑定

1、普通事件
bindtap = " " <==等价==> bind : tap = " "

2、绑定并阻止事件冒泡
catchtap = " "

<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

• catcht会阻止之后的事件（子标签中的事件）执行

3、互斥事件绑定
mut-bind:tap = " "

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

inner view点击执行：
handleTap3>>handleTap2

outer view点击执行：
handleTap1>>handleTap2

• mut-bind 触发后，如果其他节点上也有 mut-bind，则其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发。

4、事件的捕获阶段
capture-bind:touchstart = " "

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

inner view点击 执行：
handleTap2>>handleTap4>>handleTap3>>handleTap1

• capture-bind捕获阶段由外向内执行，接着执行普通绑定事件（冒泡）