视图事件
事件是视图层和逻辑层的通讯方式
事件将用户的行为反映到逻辑层,进而对数据进行处理、发起请求、更新数据等而后再更新视图
事件可以绑定到组件上,当满足设定条件后,就会调用逻辑层定义的事件中进行数据交互
事件对象可以携带额外的数据,在逻辑层的事件回调函数中会接收视图层传递的数据,如id, dataset, touches
事件回掉函数中可以接收直接指定的id属性,除此之外的,如name,class等并不能获取到,自定义属性可以使用data-*定义,并在currentTarget,或target中的dataset中获取到
视图层事件绑定
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view> //冒泡事件
<view id="tapTest" data-hi="WeChat" catchtap="tapName"> Click me! </view> //非冒泡事件,阻止事件冒泡
tapName与在Page中定义的函数名相同,否则触发事件时会报错
自基础库版本 1.5.0 起,bind
和catch
后可以紧跟一个冒号,其含义不变,如bind:tap
、catch:touchstart
。
事件冒泡
bind绑定的事件不会阻止事件冒泡,catch绑定的事件会阻止事件冒泡
官方示例:
<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>
点击 inner view 事件调用顺序 handleTap3 -> handleTap2
点击middle view 只会调用 handleTap2
点击outer view 只会调用 handleTap1
事件捕获
自基础库版本 1.5.0 起,触摸类事件支持捕获阶段。
捕获阶段位于冒泡阶段之前,且在捕获阶段中,事件到达节点的顺序与冒泡阶段恰好相反。
需要在捕获阶段监听事件时,可以采用capture-bind
、capture-catch
关键字,后者将中断捕获阶段和取消冒泡阶段。
官方示例
<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
outer view
<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
inner view
</view>
</view>
点击 inner view 事件调用顺序 handleTap2 -> handleTap4 -> handleTap3 -> handleTap1
点击outer view 事件调用顺序 handleTap2 -> handleTap1
如果将上面代码中的第一个capture-bind
改为capture-catch
,将只触发handleTap2
。而且会取消bind函数监听
<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
outer view
<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
inner view
</view>
</view>
事件对象
事件回调函数的接收的事件对象包含下列信息
BaseEvent 基础事件对象属性列表:
属性 | 类型 | 说明 |
---|---|---|
type | String | 事件类型 |
timeStamp | Integer | 事件生成时的时间戳 |
target | Object | 触发事件的组件的一些属性值集合 |
currentTarget | Object | 当前组件的一些属性值集合 |
CustomEvent 自定义事件对象属性列表(继承 BaseEvent):
属性 | 类型 | 说明 |
---|---|---|
detail | Object | 额外的信息 |
TouchEvent 触摸事件对象属性列表(继承 BaseEvent):
属性 | 类型 | 说明 |
---|---|---|
touches | Array | 触摸事件,当前停留在屏幕中的触摸点信息的数组 |
changedTouches | Array | 触摸事件,当前变化的触摸点信息的数组 |
以上信息共同组成了接收的object
WXML的冒泡事件列表:
类型 | 触发条件 | 最低版本 |
---|---|---|
touchstart | 手指触摸动作开始 | |
touchmove | 手指触摸后移动 | |
touchcancel | 手指触摸动作被打断,如来电提醒,弹窗 | |
touchend | 手指触摸动作结束 | |
tap | 手指触摸后马上离开 | |
longpress | 手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发 | 1.5.0 |
longtap | 手指触摸后,超过350ms再离开(推荐使用longpress事件代替) | |
transitionend | 会在 WXSS transition 或 wx.createAnimation 动画结束后触发 | |
animationstart | 会在一个 WXSS animation 动画开始时触发 | |
animationiteration | 会在一个 WXSS animation 一次迭代结束时触发 | |
animationend | 会在一个 WXSS animation 动画完成时触发 | |
touchforcechange | 在支持 3D Touch 的 iPhone 设备,重按时会触发 | 1.9.90 |
注:除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件,如<form/>
的submit
事件,<input/>
的input
事件,<scroll-view/>
的scroll
事件,(详见各个组件)