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


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 相关文章推荐
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
JS生成不重复随机数组的函数代码
Jun 10 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 Javascript
使用webpack和rollup打包组件库的方法
Feb 25 Javascript
详解CocosCreator项目结构机制
Apr 14 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实现分页的一个示例
2006/10/09 PHP
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
php常用表单验证类用法实例
2015/06/18 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
Javascript 陷阱 window全局对象
2008/11/26 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
在Javascript中 声明时用"var"与不用"var"的区别
2013/04/15 Javascript
js 走马灯简单实例
2013/11/21 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
Python中的with...as用法介绍
2015/05/28 Python
深入解析Python中函数的参数与作用域
2016/03/20 Python
Python字典的核心底层原理讲解
2019/01/24 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
深入学习python多线程与GIL
2019/08/26 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
python中p-value的实现方式
2019/12/16 Python
python实现的分层随机抽样案例
2020/02/25 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
python热力图实现简单方法
2021/01/29 Python
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
测绘工程本科生求职信
2013/10/10 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
人事任命书范文
2014/06/04 职场文书
体育比赛口号
2014/06/09 职场文书
土建工程师岗位职责
2014/06/10 职场文书
使用springMVC所需要的pom配置
2021/09/15 Java/Android
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL