微信小程序常见事件

什么是事件?
1、事件是渲染层到逻辑层的通讯方式。
2、事件可以将用户的行为反馈到逻辑层进行处理。事件也可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
3、事件对象可以携带额外信息,比如:id,dataset,touches等一系列的信息。
4.事件还是连同WXML组件和javascript的桥梁。

事件的分类
1、冒泡事件:一个组件上的事件被触发,该事件会向组件的父节点传递
2、非冒泡事件:该事件不会向父节点传递

事件相关的属性:
1、以bind开头的属性是组件绑定的不阻止冒泡的函数。
2、以catch开头的属性是组件绑定的阻止冒泡的函数。
3、以data绑定的属性会随着事件传递到函数中去。
借助这些属性我们完成了这些事件整体的绑定和事件的流程。

事件的应用场景:
用户操作:用户点击,用户长按,
小程序状态:小程序启动,页面加载完成,小程序进入后台等。

常见的通用事件一共有11种:
1.touchstart事件用于监听用户手指触摸动作的开始。当用户触摸到我们的组件时,我们就可以监听到touchstart事件。

2.touchmove事件用于监听用户手指触摸移动事件。用户的手指已经点在类我们组件上,然后手指发生了移动,我们就可以监听到touchmove事件。

3.touchcancel事件用于用户触摸动作被打断的情况,如来电提醒,弹窗。

4.touchend事件用于用户触摸操作的结束。

5.tap事件用于监听用户触摸后马上离开的情况。

6.longpress和longtap事件都用于监听用户触摸后超过350ms再离开。如果该事件被指定了回调函数,则不会触发tap事件。在使用时推荐使用longpress事件。

8.transitionend事件用于监听wxss transition或wx.createAnimation动画结束。

9.Animationstart事件在一个WXSS animation动画开始时触发。

10.Animationiteration动画一次迭代后触发。

11.Animationend动画结束后触发。

当事件回调触发时,会收到一个事件对象,对象的详细信息如下:

属性 类型 说明
type String 事件类型
timeStamp Integer 页面打开到触发事件的时间戳(毫秒数)
target Object 触发事件组件的一些属性值集合
currentTarget Object 当前组件的一些属性值集合
mark Object 事件标记数据
detai Object 组件额外信息
touches Array 触摸事件,当前停留在屏幕的触摸点信息的数组
changedTouches Array 触摸事件,当前变触摸点信息的数组
dataset String 事件源组件上由data-开头自定义的属性值
id String 当前组件的ID
tagName String 当前组件的类型

事件绑定:
想要组件响应特定的事件,就需要将事件绑定在组件上。事件绑定的写法和组件属性一致,以key="value"的形式绑定;

1.bind和catch:
bind事件绑定不会阻止冒泡事件往上冒泡,简单来说,bind所绑定的事件对应会向上传递,让自己的父组件响应对应的事件。而catch事件会把对应的事件阻拦在自己这里,只有自己能够响应对应事件。

2.冒泡事件:**
除了上文提到的以外的自定义事件,如无声明,均为非冒泡事件,如form的submit事件,input的input事件等。

tap等用户触摸引发的事件时冒泡事件,其它事件大多时非冒泡事件。

3.冒泡规则:

当在Button上处罚一个事件时:
如果事件是非冒泡的:只有Button上能监听到事件。
如果事件是冒泡的:其上级组件都可以一次监听到事件。

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值