微信小程序10 - 事件流

前面说过事件可以让视图层和逻辑层进行通信。那什么是事件呢?
在这里插入图片描述

如何绑定组件上的事件?
在这里插入图片描述

index.wxml
通过view标签来绑定一个点击事件,事件名是clickMe
index.js
绑定了clickMe的回调函数,{打印事件函数所有的返回信息}

打印的事件对象各个属性的含义:

  • type: 触发事件的事件类型
  • timestamp: 触发事件当时的一个时间戳
  • touches: 数组,touch对象,触摸点
  • detail: 绑定事件所携带的数据 (触摸点距离文档左上角的x, y)

事件模型
在这里插入图片描述

可捕获事件里面,longtap 和longpress 比较的话, 推荐longpress的事件操作。

可冒泡的事件类型:动画事件 + 可捕获的事件

transitionend :渐变动画结束后触发
animationstart: wxss 动画开始的事件回调
animationiteration:wxss 动画执行一次迭代时候的调用
animationend:wxss动画结束后的调用
touchforcechange: iphone设备上触发3d touch 的事件回调

在这里插入图片描述

捕获事件和冒泡事件的使用例子:

在这里插入图片描述
官方文档
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

bind:* : 绑定事件, 事件会冒泡, 优先目标触发, 然后逐级向父节点传递

catch:* : 绑定事件, 阻止冒泡

capture-bind:* : 反向冒泡, 优先根节点, 逐级派发到目标

capture-catch:* : 阻止反向冒泡, 只会触发绑定了事件的根节点

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值