微信小程序 事件响应

返回目录

微信小程序中事件分为冒泡事件和非冒泡事件：

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

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

• key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本1.5.0起, bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、、catch:touchstart。
• value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

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

自基础库版本 1.5.0 起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

事例:

在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。

<view class="container">
    <view bind:touchstart="handleTap1" capturebind:touchstart="handleTap2">
        outer view
        <view bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">inner view</view>    
    </view>
</view>

使用场景

一. 多个按钮点击,获取当前点击的是哪一个按钮

<view class="container">
    <block wx:for="{{5}}" wx:key="{{index}}">
        <view data-index="{{index}}" bindtap='clickTap'>
            <text style="color:{{currentIndex===index ? 'red' : 'blue'}}">{{'按钮' + index}}</text>
        </view>
    </block>
</view>

data: {
    currentIndex: 0
},

clickTap(event) {
    this.setData({
        currentIndex: event.currentTarget.dataset.index
    })
},

二. 监听动画结束

<view class="container">
    <view class='box'>
        <view style='width:50px;height:50px;background-color:red;' animation="{{animationAction}}" bindtap='clickTap' bindtransitionend="transitionend">
        </view>
    </view>
</view>

clickTap(event) {
    let animationAction = wx.createAnimation({
            duration: 1000,
            timingFunction: 'linear'
        });
    animationAction.scale(5).step();
    this.setData({
        animationAction: animationAction.export()
    })
},

transitionend(event) {
    console.log('动画结束' + event);
    let animationAction = wx.createAnimation({
            duration: 1000,
            timingFunction: 'linear'
        });
        animationAction.scale(1).step();
        this.setData({
            animationAction: animationAction.export()
        })
},

image.png

返回目录