事件小程序事件类型及绑定说明

Posted 2021-01-15 小程序开发

1. 事件分为两类：

a) 冒泡事件

b) 非冒泡事件:

除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件

 

2. 事件绑定（bind、catch）

事件绑定有两种方式：

a) 以bind+事件名称，或 bind: + 事件名称，比如： bindtap 等同于 bind:tap，这种方式不会阻止事件向上冒泡。

b) 以catch+事件名称，或catch: + 事件名称，比如: catchtap 等同于 catch:tap，这种方式会阻止事件向上冒泡。

 

当组件触发事件时传递event参数，比如：

<view bind:tap="sample">单击我</view>

1 Page({
2   sample: function(event) {
3     console.log(event) // 这里输出事件对象的信息
4   }
5 })

事件处理函数： sample会收到一个参数event，event相关资料见：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

 

 

3. 事件的捕获(capture-bind 、 capture-catch)

事件的捕获优先在事件之前触发，捕获顺序与冒泡是相反的，以下代码中点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。

1 <view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
2   outer view
3   <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
4     inner view
5   </view>
6 </view>

capture-catch 将中断捕获阶段和取消冒泡阶段，以下代码中的将只触发handleTap2。

1 <view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
2   outer view
3   <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
4     inner view
5   </view>
6 </view>