小程序事件

什么是事件

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

事件的使用方式

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

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

相关文章

来自专栏angularejs学习篇

angularjs学习第三天笔记(过滤器第二篇---filter过滤器及其自定义过滤器)

您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指...

642
来自专栏angularejs学习篇

angularjs学习第三天笔记(过滤器第二篇---filter过滤器及其自定义过滤器)

您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指...

821
来自专栏对角另一面

读Zepto源码之Event模块

Event 模块是 Zepto 必备的模块之一,由于对 Event Api 不太熟,Event 对象也比较复杂,所以乍一看 Event 模块的源码,有点懵,细看...

2220
来自专栏LIN_ZONE

Vue.js——60分钟快速入门(转载) Vue.js介绍声明该文是转载的,欢迎转载,支持尊重版权,原文作者:keepfool,原文地址:http://www.cnblogs.com/keepfo

Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于...

662
来自专栏PHP技术

12个非常实用的JavaScript小技巧

在这篇文章中将给大家分享12个有关于JavaScript的小技巧。这些小技巧可能在你的实际工作中或许能帮助你解决一些问题。 使用!!操作符转换布尔值 有时候我们...

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

从 JavaScript 到 TypeScript

TypeScript 并不是一个完全新的语言, 它是 JavaScript 的超集,为 JavaScript 的生态增加了类型机制,并最终将代码编译为纯粹的 J...

993
来自专栏河湾欢儿的专栏

event事件对象

event: 事件对象,当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细信息都会被临时保存到一个指定的地方-event对象,供我们在需要的时候调...

592
来自专栏cnblogs

DOM事件第二弹(UIEvent事件)

此文章主要总结UIEvent相关的事件,如有不对的地方,欢迎指正。 一、uitls.js(绑定事件公共类) var fixs = { 'focusin'...

1709
来自专栏水击三千

浅谈JavaScript的事件(事件类型)

  Web浏览器能够发生的事件有很多种类型,不同的事件类型有不同的事件信息。DOM3级的事件类型主要包括:UI事件,用户与页面上的元素交互时触发;焦点事件,元素...

2225
来自专栏编程

Python基础1

数据类型 Python3中有6钟标准的数据类型:Number(数字)、String(字符 串)、List(列表)、Tuple(元组)、Sets(集合)、Dict...

16610

扫码关注云+社区