小程序基础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)
}
})
可在控制台下查看其具体信息。
事件详解
事件分类
事件分为冒泡事件和非冒泡事件:
- 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
- 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
WXML的冒泡事件列表:暂时不是很理解
事件绑定
事件绑定的写法同组件的属性,以 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 基础事件对象属性列表:
CustomEvent 自定义事件对象属性列表(继承 BaseEvent):
TouchEvent 触摸事件对象属性列表(继承 BaseEvent):
参数详解
type:
代表事件的类型。
timeStamp:
页面打开到触发事件所经过的毫秒数。
target:
触发事件的源组件。
currentTarget:
事件绑定的当前组件。
以上是关于小程序基础14:事件的主要内容,如果未能解决你的问题,请参考以下文章