微信小程序事件流原理解析


Posted in Javascript onNovember 27, 2019

这篇文章主要介绍了微信小程序事件流原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

一、什么是事件?

事件是视图层到逻辑层的通讯方式;

事件可以将用户的行为,反馈到逻辑层进行处理;

事件可以绑定在组件上,触发事件后,就会执行逻辑层中对应的事件处理函数;

事件对象可以携带额外信息。

二、事件模型

事件分为事件捕获阶段、事件冒泡阶段、事件处理阶段

微信小程序事件流原理解析

事件对象的属性:

  • type:触发事件的类型

  • timestamp:触发事件当时的时间戳

  • target:触发事件的根源组件,包括触发事件组件的id,类型,以及dataset自定义属性的集合

  • currentTarget:触发事件的当前组件,触发当前事件的id,类型,以及dataset自定义属性的集合

  • touches:表示我们停留在屏幕上触摸点的一个信息;

  • changedTouches:表示一个有变化的触摸点的信息;

  • detail:表示我们绑定事件所携带的数据,包括x/y到页面左上角的距离

currentTarget和target的区别,

currentTarget:表示当前组件,

target:根源组件:

比如,如上图,最外层绑定了一个点击事件,最里面的那层绑定了一个点击事件,当点击最里面那个事件,target代表了最外层的组件,currentTarget代表了最里面那个组件

三、事件的类型

可捕获事件

touchstart、tap、touchmove、longpress、touchcancel、longtap、touchend

可冒泡事件

touchstart longtap、touchmove transitionend、touchcancel、animationstart、touchend、animationiteration、tap、animationend、longpress touchforcechan.、

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JSQL 批量图片切换的实现代码
May 05 Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
JS实现简单省市二级联动
Nov 27 #Javascript
Angular value与ngValue区别详解
Nov 27 #Javascript
原生js实现二级联动菜单
Nov 27 #Javascript
微信小程序wxml列表渲染原理解析
Nov 27 #Javascript
原生js实现下拉选项卡
Nov 27 #Javascript
浅析Vue下的components模板使用及应用
Nov 27 #Javascript
d3.js 地铁轨道交通项目实战
Nov 27 #Javascript
You might like
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
浅谈php命令行用法
2015/02/04 PHP
php fread读取文件注意事项
2016/09/24 PHP
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
python常用知识梳理(必看篇)
2017/03/23 Python
Django中的文件的上传的几种方式
2018/07/23 Python
python 字典中取值的两种方法小结
2018/08/02 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
python线程优先级队列知识点总结
2021/02/28 Python
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
自荐信模版
2013/10/24 职场文书
幼儿园消防安全制度
2014/01/26 职场文书
妈妈的账单教学反思
2014/02/06 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
骨干教师培训方案
2014/05/06 职场文书
质量承诺书格式
2014/05/20 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
建筑横幅标语
2014/10/09 职场文书
2014年德育工作总结
2014/11/20 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis
Python面向对象之内置函数相关知识总结
2021/06/24 Python
php png失真的原因及解决办法
2021/11/17 PHP