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


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 相关文章推荐
css样式标签和js语法属性区别
Nov 06 Javascript
js中关于一个分号的崩溃示例
Nov 11 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
详解JavaScript 高阶函数
Sep 14 Javascript
vue中axios封装使用的完整教程
Mar 03 Vue.js
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
Terran兵种对照表
2020/03/14 星际争霸
php使用curl访问https示例分享
2014/01/17 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python中的类学习笔记
2014/09/23 Python
Python优先队列实现方法示例
2017/09/21 Python
微信跳一跳python代码实现
2018/01/05 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
后勤采购员岗位职责
2013/12/19 职场文书
大学生创业计划书的格式要求
2013/12/29 职场文书
执行总经理岗位职责
2014/02/03 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
门前三包责任书
2014/04/15 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技