微信小程序事件详解

事件详解

事件分类

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

• 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
  （以触摸事件与动画事件为主。）
• 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

普通事件绑定

• bind+事件名的写法类似于组件的属性：

<view bindtap="handleTap">
    Click here!
</view>

• 事件绑定函数可以是一个数据绑定，但对应数据必须是一个字符串，以指定事件处理函数名；如果它是个空字符串，则这个绑定会失效（可以利用这个特性来暂时禁用一些事件）。

<view bindtap="{{ handlerName }}">
    Click here!
</view>

绑定并阻止事件冒泡

• catch绑定事件是用来阻止事件向上冒泡。
  例如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。

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

互斥事件绑定

• 有时候我们不希望譬如嵌套组件的事件都响应，即互斥的，就使用mut-bind来绑定事件（自基础库版本 2.8.2 起支持）。一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发。
  例如在下边这个例子中，点击 inner view 会先后调用 handleTap3 和 handleTap2 ，点击 middle view 会调用 handleTap2 和 handleTap1 。

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