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

 更新时间:2019年11月27日 16:32:07   投稿:yaominghui  
这篇文章主要介绍了微信小程序事件流原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

这篇文章主要介绍了微信小程序事件流原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

一、什么是事件?

事件是视图层到逻辑层的通讯方式;

事件可以将用户的行为,反馈到逻辑层进行处理;

事件可以绑定在组件上,触发事件后,就会执行逻辑层中对应的事件处理函数;

事件对象可以携带额外信息。

二、事件模型

事件分为事件捕获阶段、事件冒泡阶段、事件处理阶段

事件对象的属性:

  •   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.、

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 使用layer弹窗和layui表单实现新增功能

    使用layer弹窗和layui表单实现新增功能

    最近做项目遇到这样的需求使用layer在弹窗内完成新增,成功后提示并刷新页面,下面小编给大家带来了使用layer弹窗和layui表单做新增功能,具体实现代码,参考下本文
    2018-08-08
  • JavaScript瀑布流布局实现代码

    JavaScript瀑布流布局实现代码

    这篇文章主要为大家详细介绍了JavaScript瀑布流布局的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • js取float型小数点后两位数的方法

    js取float型小数点后两位数的方法

    js中取小数点后两位方法最常用的就是四舍五入函数了,前面我介绍过js中四舍五入一此常用函数,这里正好用上,下面我们一起来看取float型小数点后两位一些方法总结
    2014-01-01
  • 微信JS-SDK选取手机照片上传功能

    微信JS-SDK选取手机照片上传功能

    这篇文章主要为大家详细介绍了微信JS-SDK选取手机照片上传功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 通过js控制时间,一秒一秒自己动的实例

    通过js控制时间,一秒一秒自己动的实例

    下面小编就为大家带来一篇通过js控制时间,一秒一秒自己动的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程

    webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程

    这篇文章主要介绍了webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-06-06
  • javascript鼠标滑动评分控件完整实例

    javascript鼠标滑动评分控件完整实例

    这篇文章主要介绍了javascript鼠标滑动评分控件实现方法,以完整实例形式详细分析了javascript操作鼠标事件及页面元素样式实现评分效果的方法,需要的朋友可以参考下
    2015-05-05
  • js实现的倒计时按钮实例

    js实现的倒计时按钮实例

    这篇文章主要介绍了js实现的倒计时按钮,实例分析了javascript倒计时效果的相关实现技巧,需要的朋友可以参考下
    2015-06-06
  • JavaScript实现4位随机验证码的生成

    JavaScript实现4位随机验证码的生成

    这篇文章主要为大家详细介绍了JavaScript实现4位随机验证码的生成,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • uniapp在微信小程序中使用ECharts的方法

    uniapp在微信小程序中使用ECharts的方法

    本文主要介绍了uniapp集成Echarts,实现地图图表的展示,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2021-06-06

最新评论