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


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 相关文章推荐
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
javascript操作cookie_获取与修改代码
May 21 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
详解vue2.0模拟后台json数据
May 16 Javascript
vue实现图片预览组件封装与使用
Jul 13 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 SQL防注入代码集合
2008/04/25 PHP
openPNE常用方法分享
2011/11/29 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
使用js实现雪花飘落效果
2013/08/26 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
Express的路由详解
2015/12/10 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
vue的基本用法与常见指令
2017/08/15 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
python re模块的高级用法详解
2018/06/06 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
项目开发计划书
2014/01/09 职场文书
校运会广播稿100字
2014/01/27 职场文书
《听鱼说话》教学反思
2014/02/15 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
党员反邪教心得体会
2016/01/15 职场文书
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs