wxml模板语法-事件绑定

事件是渲染层到逻辑层的通讯方式，通过事件可以将用户在渲染层的行为，反馈到逻辑层进行业务的处理

小程序中常用事件

事件对象的属性

target 和 currentTarget区别

target 是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件

点击内部按钮，点击事件会冒泡执行外层view的tap事件，此时对于外层的view来说：

• e.target指向的是触发事件的源头组件（内部按钮）
• e.currentTarget指向的是当前正在触发事件的组件（外层view）

bindtap 语法格式

在小程序中不存在html中的onclick鼠标点击事件，而是通过tap事件响应用户触摸行为

语法格式：

<button type='primary' bindtap='btnTapHandler'>按钮</button>

处理函数：

Page({
    btnTapHandler(e) {
        console.log(e)
    }
})

点击按钮打印信息：

在事件处理函数中为data中的数据赋值

通过调用 this.setData(dataObject) 方法，可以给data中数据重新赋值

Page({
    data: {
        count: 0,
    },
    changCount() {
        this.setData({
            count: this.data.count + 1
        })
    }
})

事件传参

注意：小程序中事件传参不能在绑定事件的同时传递参数

例如：<button bindtap='handler(123)'>事件传参</button>

小程序会把bindtap 属性值同意当做事件名称处理，相当于调用handler(123)这个事件处理函数

可以为组件提供data-* 自定义属性传参，其中 * 代表参数的名字：

<button bindtap='handler' data-info='{{123}}'>事件传参</button>

• info 为参数名字
• 123 为参数值

通过 event.target.dataset.参数名 获取到具体参数值:

handler(e){
    // dataset是一个对象，包含所有通过 data-* 传递的参数项
    console.log(e.target.dataset)
    
    // 访问具体参数值
    console.log(e.target,dataset.info)
}

bindinput语法格式

在小程序中通过input事件来响应文本框的输入事件

• 通过bindinput，为文本框绑定输入事件：

<input bindinput='inputHandler'></input>

• 在页面js文件中定义事件处理函数

inputHandler(e){
    // e.detail.value 是变化后文本框最新的值
    console.log(e.detail.value)
}

实现文本框和data之间的数据同步

• 定义数据

Pages({
    msg: 'hello'
})

• 渲染结构

<input value='{{msg}}' bindinput='inputHandler'></input>

• 美化样式

input {
    border: 1px solid #eee;
    margin: 5px;
    padding: 5px;
    border-radius: 3px;
}

• 绑定 input 事件处理函数

inputHandler(e){
    this.setData({
        msg: e.detail.value
    })
}