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


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 相关文章推荐
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
JS中的作用域链
Mar 01 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
详解React之key的使用和实践
Sep 29 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
JS实现前端动态分页码代码实例
Jun 02 Javascript
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
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
PL-880隐藏功能
2021/03/01 无线电
一个改进的UBB类
2006/10/09 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
python解析xml模块封装代码
2014/02/07 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
Django实现随机图形验证码的示例
2020/10/15 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
应届生高等护理求职信
2013/10/12 职场文书
党课学习思想汇报
2014/01/02 职场文书
单位刻章介绍信范文
2014/01/11 职场文书
学校安全责任书
2014/04/14 职场文书
人力资源管理专业应届生求职信
2014/04/24 职场文书
最新离婚协议书范本
2014/08/19 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
市场营销计划书
2019/04/24 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL
vue动态绑定style样式
2022/04/20 Vue.js