小程序基础14:事件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序基础14:事件相关的知识,希望对你有一定的参考价值。

1.事件

什么是事件?

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

事件的使用方式

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

bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

在相应的Page定义中写上相应的事件处理函数,参数是event。

Page({
  tapName: function(event) {
    console.log(event)
  }
})

可在控制台下查看其具体信息。

事件详解

事件分类

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

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

WXML的冒泡事件列表:暂时不是很理解

技术分享

事件绑定

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

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

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

如在下边这个例子中,点击 inner view 会先后触发handleTap3handleTap2(因为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 基础事件对象属性列表:

技术分享

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

技术分享

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

技术分享

 

参数详解

type:

代表事件的类型。

timeStamp:

页面打开到触发事件所经过的毫秒数。

target: 

触发事件的源组件。

技术分享

currentTarget:

事件绑定的当前组件。

 

以上是关于小程序基础14:事件的主要内容,如果未能解决你的问题,请参考以下文章

小片段中的 ORA-06512 [重复]

微信小程序代码片段

微信小程序代码片段分享

小程序基础

小程序基础

小程序各种功能代码片段整理---持续更新