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

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>

 

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

上一篇:赶紧查一查你的微信和支付宝授权了多少应用!我竟然有100多个!


下一篇:Python实现微信自动回复机器人详细教程