小程序需要经常和用户进行各种交互,比如,点击界面上的某个按钮或者区域,比如滑动了某个区域;这些交互都会产生各种各样的事件。
通过 bind
或 catch
属性可以将事件绑定到组件上,然后在该页面对应的 Page 构造器(.js 文件)中定义对应的事件处理函数,如果没有对应的函数,触发事件时会报错。当用户和组件产生交互后,就会触发绑定的事件,并调用事件函数,该函数将会受到一个事件对象-event.
分为通用事件和特有事件。
如:input
有 bindinput、bindblur、bindfocus 等;scroll-view
有 bindscrolltowpper、bindscrolltolower
事件对象中包含如下几种类别的属性:
BaseEvent
基础事件对象属性列表:CustomEvent
自定义事件对象属性列表(继承 BaseEvent):TouchEvent
触摸事件对象属性列表(继承 BaseEvent
):特殊事件:canvas 中的触摸事件不可冒泡,所以没有 currentTarget。
<!--pages/event/event.wxml-->
<view class='container1'>
<block wx:for="{{titles}}" wx:key="index">
<!-- 在 data-index 和 data-item 中,末尾的 index 和 item 是我们自定义的 key,这是事件中传递数据的方式 -->
<view class='item' bindtap="handleItemClick" data-index="{{index}}" data-item="{{item}}">{{item}}</view>
</block>
</view>
// pages/event/event.js
/* pages/event/event.wxss */
.container1{
display: flex;
}
.item{
flex: 1;
text-align: center;
}
capture-bind:tap = "xxx"
用 xxx 函数来监听事件的捕获。bindtap = "xxx"
监听事件,并将事件继续传递下去。capture-catch:tap = "xxx"
捕获事件并终止传递。关于事件的官方文档:
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html