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


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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
jQuery实现文档树效果
Feb 20 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
浅谈React Event实现原理
Sep 20 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
js消除图片小游戏代码
Dec 11 Javascript
js实现扫雷源代码
Nov 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 常用字符串函数总结
2008/03/15 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
Three.js学习之网格
2016/08/10 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
python之列表推导式的用法
2019/11/29 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
python切割图片的示例
2020/11/12 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
团组织关系介绍信
2014/01/12 职场文书
产品质量承诺书
2014/03/27 职场文书
安全宣传标语口号
2014/06/06 职场文书
期末考试复习计划
2015/01/19 职场文书
员工开除通知书
2015/04/25 职场文书
机关工会工作总结2015
2015/05/26 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
MySQL笔记 —SQL运算符
2022/01/18 MySQL
MySQL分区表管理命令汇总
2022/03/21 MySQL
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers