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


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 相关文章推荐
JavaScript 在各个浏览器中执行的耐性
Apr 06 Javascript
jquery js 获取时间差、时间格式具体代码
Jun 05 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
微信小程序 数据缓存实现方法详解
Aug 26 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 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/05/07 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
Python面向对象特殊成员
2017/04/24 Python
python运行其他程序的实现方法
2017/07/14 Python
python中format()函数的简单使用教程
2018/03/14 Python
python文件拆分与重组实例
2018/12/10 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
django跳转页面传参的实现
2020/09/17 Python
python实现简单猜单词游戏
2020/12/24 Python
领导干部保密承诺书
2014/08/30 职场文书
本溪水洞导游词
2015/02/11 职场文书
全民创业工作总结
2015/08/13 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL
Python 内置函数速查表一览
2021/06/02 Python
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python