微信小程序系列(三):微信小程序事件

今天主要介绍是微信小程序的事件,我目前也是处于学习阶段希望大家可以一起交流,这相当于说是一个学习总结

1.什么是事件

事件是一种用户的行为同时事件也是通讯方式比如说触摸屏幕 触发UI层,UI层掉用逻辑部分。

2.事件类别

 点击事件 tap

长按事件 longtap

触摸事件 touchstart(开始触摸) touchend(结束触摸) touchmove(移动触摸)  touchcancel

(取消触摸)

结束触摸和取消触摸的区别:

当我们触摸屏幕然后离开屏幕 这是触摸结束;当我们手指还在屏幕,突然间来电话页面覆盖这是会触发取消触摸

还有其他事件

3.事件冒泡

新建三个view 然后给每个view设置一个高度 宽度 和颜色 个人感觉view和div有点像

微信小程序系列(三):微信小程序事件

样式

微信小程序系列(三):微信小程序事件

然后给每个view绑定上一个触发事件 点击view3 然后 发现view1 view2 view3都会触发 这种现象叫做事件冒泡。点击事件、长按事件、触摸事件都可以是冒泡事件,其他的事件都是非冒泡事件。

微信小程序系列(三):微信小程序事件

4.事件绑定

bind绑定

我们常用的bindtap就是通过bind方式绑定

catch绑定

我们将view3的bindtap改为catchtap会发现 此时点击view3,view1和view2不触发了

微信小程序系列(三):微信小程序事件

如果点击view2  view2和view1都会触发

5.事件对象详解

类型type

时间戳timeStamp

事件源组件target是我们的目标view,使我们触发的组件

当前组件currentTarget是我们点击的view

触摸点数touchs

首先现在我们所写的view1-view3的function里面加上event同时将每个function的event打印出来,我们会发现是object类型

微信小程序系列(三):微信小程序事件

然后给view1-view3加上一个id 然后我们点击view3

我们看view1的object时候currentTarget是view3、Target是view3 ;view2的object时候currentTarget是view2、Target是view3

微信小程序系列(三):微信小程序事件

dataset:是为了方便我们为view添加上我们自定义的数据和属性 

微信小程序系列(三):微信小程序事件

学习资料:bilibili极客视频