事件绑定

通过bind和catch关键字来实现事件绑定

• bind事件冒泡
• catch事件捕获

事件绑定的基本使用

<view bind:tap="bindFn">
    点击:事件冒泡
</view>
<view catch:tap="catchFn">
    点击:事件捕获
</view>

Page({
    bindFn() {
        console.log('触发点击事件')
    },
    catchFn() {
        console.log('触发捕获事件')
    },
})

bind事件和catch事件的区别：

<!-- 使用bind绑定事件，点击子元素会冒泡给父元素 -->
<view class="parent" bind:tap="parentFn">
    父元素
    <view class="child" bind:tap="childFn">
        子元素
    </view>
</view>

<!-- 使用catch绑定事件，点击子元素不会冒泡给父元素 -->
<view class="parent" catch:tap="parentFn">
    父元素
    <view class="child" catch:tap="childFn">
        子元素
    </view>
</view>

Page({
    parentFn() {
        console.log('触发父元素事件')
    },
    childFn() {
        console.log('触发子元素事件')
    },
})

事件传参

• 事件传递参数是根据自定义属性data-xxx来传递
• 通过事件的event来接收
• 传递的参数以键值对的形式保存在event.target.dataset对象里

<view data-num="222" bind:tap="getFn">
    获取
</view>

Page({
    getFn(e) {
        console.log(2, e.target);
    }
})

如何获取data里面的数据并修改数据

• 使用this.data.属性来获取 data里面的数据
• 使用this.setData({属性:属性值})来修改data中的数据

注意点：

如果不是通过this.setData({属性:属性值})的方式修改data中的值，是不会同步更新到页面。