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


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 相关文章推荐
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
Jquery 弹出层插件实现代码
Oct 24 Javascript
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
webpack4的迁移的使用方法
May 25 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
微信小程序 数据缓存实现方法详解
Aug 26 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
逐步提升php框架的性能
2008/01/10 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
网页常用特效代码整理
2006/06/23 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
结对共建协议书
2014/08/20 职场文书
施工安全保证书
2015/05/09 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
如何优化vue打包文件过大
2022/04/13 Vue.js
python中mongodb包操作数据库
2022/04/19 Python