原创

小程序事件

什么是事件

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

事件的使用方式

在组件中绑定一个事件处理函数。

例如,在首页中我们添加一个跳转事件,添加bindtap

图片.png
<view class="usermotto">
    <text class="user-motto" bindtap='clicktext'>开始动工啦</text>
  </view>
  <view class="btn-area">  
    <view bindtap='toDemo'  hover-class="navigator-hover">跳转demo页面 </view>  
    <navigator url="../demo/demo2" hover-class="navigator-hover">跳转demo2页面     </navigator>  
 </view>  
toDemo: function () {
    wx.navigateTo({
      url: '../demo/demo'
    })
  }

当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数,跳转到demo页面。然后在对应的js中写出事件的具体实现方法

事件分类

事件分为冒泡事件和非冒泡事件

冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递 (使用catchtap阻止向上冒泡) 
非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递
图片.png

注:除上表之外的其他组件自定义事件都是非冒泡事件

事件绑定的写法同组件的属性,以key、value的形式。

key以bind或catch开头,然后跟上事件的类型,如bindtap, catchtouchstart
value是一个字符串,需要在对应的Page中定义同名的函数。不然当触发事件的时候会报错。 

bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。

如在下边这个例子中,点击inner view会先后触发handleTap3和handleTap2(因为tap事件会冒泡到middle view,而middle view阻止了tap事件冒泡,不再向父节点传递),点击middle view会触发handleTap2,点击outter view会触发handleTap1。

<view id="outter" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

事件对象

如无特殊说明,当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。

BaseEvent基础事件对象属性列表:

属性 类型 说明

type String 事件类型

timeStamp Integer 事件生成时的时间戳

target Object 触发事件的组件的一些属性值集合

currentTarget Object 当前组件的一些属性值集合

CustomEvent 自定义事件对象属性列表(继承 BaseEvent):

属性 类型 说明

detail Object 额外的信息

TouchEvent 触摸事件对象属性列表(继承 BaseEvent):

属性 类型 说明

touches Array 触摸事件,当前停留在屏幕中的触摸点信息的数组

changedTouches Array 触摸事件,当前变化的触摸点信息的数组

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序布局

    开始我们的入门后,接下来就可以开始创建我们的第一个demo页面了。按照官网的步骤,在pages模块下新建我们自己的模块demo,添加好对应的文件,然后在app....

    用户2305175
  • 小程序渲染

    在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。通过遍历数据,将数据展示,类似vue中的 v-for。 wx:for-...

    用户2305175
  • 小程序的数据请求

    然后我们随便在input框输入一个值,点击查询,我们会发现通过接口交互,可以拿到请求api的对应返回操作结果

    用户2305175
  • 全栈开发工程师微信小程序-上(中)

    750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位.

    达达前端
  • 干货 | 扒一扒小程序开发中遇到的那些坑!

    开发小程序的过程中踩的坑不可谓不多,而有些坑也实在是让人郁闷,不扒一扒难以平我心头之愤呐。

    极乐君
  • 深入探索Scala的Option

    程序员最深恶痛绝并力求避免的异常是NullPointerException,很不幸,我们往往又会忽略这个错误。不知是谁设计了Null这样的对象。我在文章《并非N...

    张逸
  • 解决Linux克隆后eth0不见的问题

    1.通过VMware WorkStation的clone功能,克隆了一份Linux虚拟机,主机名为:mini2,执行ifconfig -a查看所有网卡信息,发现...

    sparkle123
  • Linux常用命令整理

    登录远程服务器,shh 用户名@IP地址,例如 ssh huangy@10.111.32.21。登录之后,如果想退出,可以使用logout退出。 常用参数: ...

    用户5325874
  • 「newbee-mall新蜂商城开源啦」SpringBoot+MyBatis开发JavaWeb线上商城项目

    之前的一些文章里都有提到过这个开源的线上商城项目,但是一直没有单独整理一篇文章来介绍它,今天就来谈谈这个项目。

    我是十三
  • 微信小程序版博客——列表页相关问题汇总

    首先是分页加载列表,从网上例子和文档来看有两种实现方式,一种是根据Page()上的 onReachBottom属性:页面上拉触底事件的处理函数,另一种就是通过s...

    Bug生活2048

扫码关注云+社区

领取腾讯云代金券