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


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 相关文章推荐
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
编写可维护面向对象的JavaScript代码[翻译]
Feb 12 Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
js使用心得分享
Jan 13 Javascript
js实现简单的左右两边固定广告效果实例
Apr 10 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
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编程开发“虚拟域名”系统
2006/10/09 PHP
oracle资料库函式库
2006/10/09 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
php debug 安装技巧
2011/04/30 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
Vue指令指令大全
2019/02/09 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
详解Python中的from..import绝对导入语句
2016/06/21 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
工商管理专业实习生自我鉴定
2013/09/29 职场文书
文秘专业毕业生就业推荐信
2013/11/08 职场文书
工程管理专业个人求职信范文
2013/12/07 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
教师节慰问信
2015/02/15 职场文书