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


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 相关文章推荐
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
JS判定是否原生方法
Jul 22 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
javascript不可用的问题探究
Oct 01 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
node省市区三级数据性能测评实例分析
Nov 06 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运行速度的一些小技巧分享
2012/07/03 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
JS监听组合按键思路及实现过程
2020/04/17 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
python中os.remove()用法及注意事项
2021/01/31 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
介绍一下游标
2012/01/10 面试题
Java如何获得ResultSet的总行数
2016/09/03 面试题
初婚未育证明
2014/01/15 职场文书
志愿者服务感言
2014/02/27 职场文书
化学教育专业自荐信
2014/07/04 职场文书
个人借款协议书范本
2014/11/17 职场文书
公司停电通知
2015/04/15 职场文书
紧急迫降观后感
2015/06/15 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
Javascript之datagrid查询详解
2021/09/15 Javascript
Python 匹配文本并在其上一行追加文本
2022/05/11 Python