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


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 相关文章推荐
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
JavaScript高阶函数_动力节点Java学院整理
Jun 28 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
vue接口请求加密实例
Aug 11 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 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
PHP学习之数组的定义和填充
2011/04/17 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
python两种遍历字典(dict)的方法比较
2014/05/29 Python
Python常用内置函数总结
2015/02/08 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
Python新手学习标准库模块命名
2020/05/29 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
XML文档面试题
2015/08/05 面试题
物理专业大学生职业生涯规划书
2014/02/07 职场文书
租房合同协议书
2014/04/09 职场文书
星级党支部申报材料
2014/05/31 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
五一晚会主持词
2015/07/01 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android