事件介绍 -凯发app官方网站

框架概述

目录结构

native 渲染

性能与优化

小程序全局配置

acss 语法参考

小程序页面

axml

sjs 语法参考

事件系统

事件介绍

事件对象

自定义组件

基础能力

基础库

基础库更新日志

更新时间：2023-02-01 15:27:55

贡献者

订阅更新

我的文档

设置

介绍

●

事件是视图层到逻辑层的通讯方式。

●

事件可以将用户的行为反馈到逻辑层进行处理。

●

事件可以绑定在组件上，当达到触发条件，就会执行逻辑层中对应的事件函数。

●

事件对象可以携带额外信息，如 id、dataset、touches。

使用方式

若要在组件中绑定一个事件处理函数，如

ontap

，则需要在该页面的 .js 文件中的

page

里定义

ontap

对应的事件处理函数。

<view id="taptestinner" data-hi="alipayinner"> click me! view>

view>

在相应的

page

中定义相应的事件处理函数

tapname

,参数为事件对象 event。

page({

tapname(event) {

console.log(event);

});

控制台输出 event 信息如下所示：

{

"type": "tap",

"timestamp": 1550561469952,

"target": {

"id": "taptestinner",

"dataset": {

"hi": "alipay"

"targetdataset": {

"hi": "alipayinner"

}

"currenttarget": {

"id": "taptest",

"dataset": {

"hi": "alipay"

}

使用组件（基础组件、扩展组件和自定义组件）时，组件里有哪些可用的事件取决于组件本身是否支持，支持的事件会在具体组件的文档里明确列出。

事件类型

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

●

冒泡事件：以关键字

为前缀，当组件上的事件被触发，该事件会向父节点传递。

●

非冒泡事件：以关键字

catch

为前缀，当组件上的事件被触发，该事件不会向父节点传递。

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

●

key 以

或

catch

开头，然后跟上事件的类型，如

ontap

、

catchtap

。

●

value 是一个字符串，对应 page 中定义的函数名，不存在时触发事件会报错。

上面代码中，点击 view3 会先后触发 handletap3 和 handletap2（因为 tap 事件会冒泡到 view2，而 view2 阻止了 tap 事件冒泡，不再向父节点传递），点击 view2 会触发 handletap2，点击 view1 会触发 handletap1。

所有会发生冒泡的事件：

类型	触发条件
touchstart	触摸动作开始。
touchmove	触摸后移动。
touchend	触摸动作结束。
touchcancel	触摸动作被打断，如来电提醒，弹窗。
tap	触摸后马上离开。
longtap	触摸后，超过 500ms 再离开。

事件的捕获阶段

自基础库

、ide

3.4.3

起，触摸类事件支持在捕获阶段触发。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用 capture-on、capture-catch 关键字，后者将中断捕获阶段和取消冒泡阶段。在下面的代码中，点击 inner view 会先后调用 handletap2、handletap4、handletap3、handletap1。

如果将上面代码中的第一个 capture-on 改为 capture-catch，将只触发 handletap2。

支持冒泡的组件和事件明细

组件	事件明细
view	●tap ●longtap ●touchstart ●touchend ●touchmove ●touchcancel
text	●tap
image	●tap ●longtap ●touchstart ●touchend ●touchmove ●touchcancel
scroll-view	●touchstart ●touchend ●touchmove ●touchcancel
swiper	●touchstart ●touchend ●touchmove ●touchcancel
button	●tap
rich-text	●tap ●longtap ●touchstart ●touchend ●touchmove ●touchcancel
movable-view	●tap ●touchstart ●touchend ●touchmove ●touchcancel

常见问题

q：大 box 的事件覆盖了小 box 的事件，点击小 box 也执行了大 box 的事件如何解决？

a：推荐使用关键字为

catch

前缀的非冒泡事件来阻止事件冒泡，可查看

非冒泡事件

。

相关问题