事件,视图层到逻辑层的一种通讯方式,或者将用户的行为返回到逻辑层,当我们在组件绑定事件之后,当我们触发事件,就会执行逻辑层绑定的事件,处理回调函数,当页面的事件触发之后

  页面上元素一些额外事件,通过事件对象传递给我们的回调函数

  绑定事件的实例:

  

  通过view标签来给他绑定了一个事件,事件名clickme,在index.js中,我们绑定了一个clickme的回调函数,在回调函数内,我们打印出了事件所传入事件对象的参数

  事件对象上,各个属性的一个含义;

    type:触发事件的类型

    timestamp:触发事件当时的时间戳

    target:触发事件的根源组件,包括触发事件组件的id,类型,以及dataset自定义属性的集合

    currentTarget:触发事件的当前组件,触发当前事件的id,类型,以及dataset自定义属性的集合

    touches:表示我们停留在屏幕上触摸点的一个信息;

    changedTouches:表示一个有变化的触摸点的信息;

    detail:表示我们绑定事件所携带的数据,包括x/y到页面左上角的距离

  

  小程序的事件模型:

  

  小程序的事件模型分3个部分:事件捕获(自上而下)事件处理阶段(执行),事件冒泡阶段(由内到外)

  currentTarget和target的区别,

    currentTarget:表示当前组件,

    target:根源组件:

    比如,如上图,最外层绑定了一个点击事件,最里面的那层绑定了一个点击事件,当点击最里面那个事件,target代表了最外层的组件,currentTarget代表了最里面那个组件

  小程序的事件

    

  因为冒泡事件包含了捕获事件,那就只说冒泡事件

    touchstart:手指按下屏幕的一个事件

    touchmove:手机按下屏幕移动的一个事件

    touchcancel:有来电提醒或者其他操作打断的一个事件

    touchend:手指离开屏幕的一个事件

    tap:手指点击屏幕,从手机点击到手指离开小于350ms的

    longpress:手机点击屏幕,超过350ms的后的一个操作(推荐)不能执行tap操作

    longtap:手机点击屏幕,超过350ms的后的一个操作,可以执行tap操作

    transitionend:渐变动画结束后,执行的一个操作

    animationstart:wxss动画开始的一个事件回调

    animationiteration:wxss动画执行,迭代一次的之后的调用

    animationend:wxss动画结束后的,事件回调

    touchforcechange:有3d touch的ipone设备下的事件回调

  捕获事件和冒泡事件的一个使用;

    bind不会阻止事件冒泡;

    capture-catch:可以绑定一个事件的捕获

    catch:可以阻止事件冒泡或者事件捕获阶段

微信小程序的事件的更多相关文章

  1. 微信小程序中事件

    微信小程序中事件 一.常见的事件有 类型 触发条件 最低版本 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断,如来电提醒,弹窗 ...

  2. 微信小程序Dom事件实现

    面对微信小程序,可能没有像我们平时使用JQuery那样随心所欲.本篇就是为了解决这个问题. 请合理使用工具! 细节就不说了,直接备份一个实现的案例: wxml <view class=" ...

  3. 微信小程序自定义事件

    案例结构 首先,我还是会以案例的形式向大家讲解(这样也能方便大家更好的理解)简单介绍一下案例项目的内容(以上一章自定义组件的案例为基础)项目名称:component自定义子组件cpt父组件:logs ...

  4. 微信小程序(三)-事件绑定

    小程序事件绑定 https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html 1.数据 / ...

  5. 微信小程序:事件绑定

    小程序中绑定事件,通过bind关键字来实现.如bindinput,bindtap(绑定点击事件),bindchange等. 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑 ...

  6. 微信小程序之 -----事件

    事件分类      1. 冒泡事件:     当一个组件上的事件被触发后,该事件会向父节点传递.      2. 非冒泡事件:   当一个组件上的事件被触发后,该事件不会向父节点传递.   常见的冒泡 ...

  7. 微信小程序-视图事件

    事件 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 ...

  8. 微信小程序-bindtap事件与冒泡

    bindtap就是点击事件 在.wxml文件绑定: <text id='textId' data-userXxx='100' bindtap='tapMessage'>cilck here ...

  9. 微信小程序:冒泡事件及其阻止

    事件的类别分为几种: 点击事件:tap 长按事件:longtap 触摸事件:touchstart: touchend:touchcancel:touchmove 其他:input:submit.... ...

随机推荐

  1. vue 父子component生命周期

    如今前端框架都流行组件化,页面元素都可以使用组件进行高度概括,那么处理组件之间的关系就如同处理页面架构一样重要.正确理解组件之间的关系,才能让代码按照我们与预料方式工作.最近参与了一个Vue.js的项 ...

  2. es6 export及export default 的使用 及 区别

    首先要知道export,import ,export default是什么 ES6模块主要有两个功能:export和importexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口i ...

  3. Monitor HDU6514 二维差分入门学习

    Monitor HDU 6514 二维差分入门学习 题意 小腾有\(n*m\)的田地,但是有小偷来偷东西,在一片矩形区域上,有一部分区域是监控可以覆盖到的,这部分区域由一个或多个包含于该矩形区域的小矩 ...

  4. 工作中常见的hive语句总结

    hive的启动: 1.启动hadoop2.开启 metastore 在开启 hiveserver2服务nohup hive --service metastore >> log.out 2 ...

  5. WOJ#1243 蜥蜴 lizard

    描述 在一个r行c列的网格地图中有一些高度不同的石柱,一些石柱上站着一些蜥蜴,你的任务是让尽量多的蜥蜴逃到边界外. 每行每列中相邻石柱的距离为1,蜥蜴的跳跃距离是d,即蜥蜴可以跳到平面距离不超过d的任 ...

  6. Javascript 中的深浅拷贝

    工作中经常会遇到需要复制 JS 数据的时候,遇到 bug 时实在令人头疼:面试中也经常会被问到如何实现一个数据的深浅拷贝,但是你对其中的原理清晰吗?一起来看一下吧! 为什么会有深浅拷贝 想要更加透彻的 ...

  7. ElasticSearch 7.x 默认不在支持指定索引类型

    原文:ElasticSearch 7.x 默认不在支持指定索引类型 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://bl ...

  8. 第一个javascript脚本

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. linux学习笔记(1):

    一.Linux系统简介 1.什么是linux Linux是一个免费的.多用户.多任务的操作系统,其运行方式.功能和UNIX系统很相似,但Linux系统的稳定性.安全性与网络功能是许多商业操作系统所无法 ...

  10. 日志处理--高效Linux命令整理

    序 在学习使用python处理日志开始阶段,对我阻力最大的莫过于对linux的不熟悉了,有种寸步难行的感觉. 在之后乱学一通之后,发现有点对我颇有益处: 学<鸟哥linux私房菜基础学习篇> ...