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


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 相关文章推荐
javascript判断机器是否联网的2种方法
Aug 09 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
初识Javascript小结
Jul 16 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
js代码编写无缝轮播图
Sep 13 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 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类Class的概念
2012/06/14 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
python动态加载变量示例分享
2014/02/17 Python
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
python线程中同步锁详解
2018/04/27 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
python中threading开启关闭线程操作
2020/05/02 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
教师求职推荐信范文
2013/11/20 职场文书
文明社区申报材料
2014/08/21 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
2019个人工作总结
2019/06/21 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
PHP命令行与定时任务
2021/04/01 PHP
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
php修改word的实例方法
2021/11/17 PHP
Golang map映射的用法
2022/04/22 Golang