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


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 相关文章推荐
新闻内页-JS分页
Jun 07 Javascript
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
IE关闭时判断及AJAX注销案例学习
Feb 18 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 Javascript
es6函数之尾递归用法实例分析
Apr 25 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中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
PHP中each与list用法分析
2016/01/08 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
python装饰器实例大详解
2017/10/25 Python
python远程邮件控制电脑升级版
2019/05/23 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
python3字符串输出常见面试题总结
2020/12/01 Python
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
大学生毕业求职的自我评价
2013/09/29 职场文书
《曹刿论战》教学反思
2014/03/02 职场文书
房产继承公证书
2014/04/09 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL