小程序事件

什么是事件

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

事件的使用方式

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

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

相关文章

来自专栏沈唁志

jQuery中的9个选择器

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

CSS 弹性布局 flex 属性详解

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

793
来自专栏十月梦想

CSS三种表现形式

882
来自专栏流媒体

Android View measure解读

993
来自专栏前端知识分享

第77天:jQuery事件绑定触发

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

1143
来自专栏编程坑太多

事件对象的使用、属性和方法

1183
来自专栏IMWeb前端团队

导航菜单优化制作

以前制作导航菜单,总要加许多id在HTML中,js代码也要将id挨个加上去,今日终于习得破解之法,不在用以前那种笨拙的方法了。 ? 以下是HTML代码: <bo...

2677
来自专栏WD学习记录

html学习笔记1

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

1043
来自专栏九彩拼盘的叨叨叨

jQuery 选取元素概要

注意: 对于 jQuery 自定义的选择器,为了性能,先用 CSS 定义的选择器选,再从结果集中筛选时用 jQuery 自定义的选择器。如:

742
来自专栏一“技”之长

Java开发GUI之Menu菜单 原

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

962

扫码关注云+社区