小程序事件

什么是事件

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

事件的使用方式

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

例如,在首页中我们添加一个跳转事件,添加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 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

第77天:jQuery事件绑定触发

返回值不同,.height()方法返回的是 数字类型(20),.css(“height”)返回的是字符串类型(20px),因此.height()方法常用在参与数...

1053
来自专栏IT 指南者专栏

前端系列之CSS基础知识概述

1、什么是DIV (1)、div就是html一个普通标签,进行区域划分。div特性:独自占一行。独自不能实现复杂效果。必须结合css样式进行渲染。 (2)、d...

37511
来自专栏WD学习记录

html学习笔记1

1.网页文档的结构和格式的定义是由HTML元素来完成的.HTML元素是由单个或一对标签定义的范围。一个标签就是左右分别有(<)(>)的字符串。开始标签是指不以/...

973
来自专栏一“技”之长

Java开发GUI之Menu菜单 原

    在MacOS上的软件都有一个菜单栏,会浮现在屏幕顶部,Java的awt包中也提供了构建菜单功能的相关组件,示例代码如下:

792
来自专栏一个会写诗的程序员的博客

CSS 弹性布局 flex 属性详解

定义了当flex容器有多余空间时,item是否放大。默认值为0,即当有多余空间时也不放大;可能的值为整数,表示不同item的放大比例,如

713
来自专栏落花落雨不落叶

简单轮播图实现

28410
来自专栏Java后端技术

细谈CSS布局方式

  [2].浮动布局方式:通过设置html的float属性显示,值:none不浮动、left对象向左浮动,而后面的内容流向对象的右侧、right对象向右浮动,而...

772
来自专栏HTML5学堂

jQuery animate动画精讲

HTML5学堂:animate是jQuery中很好用的一个方法,用于实现自定义动画。对于animate方法是有不同的书写方法的,今天我们就来说说animate平...

2855
来自专栏老马寒门IT

02-老马jQuery教程-jQuery事件处理

1. 绑简单事件 在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。 jQuery简单绑定事件...

1738
来自专栏沈唁志

jQuery中的9个选择器

1272

扫码关注云+社区