微信小程序 - WXML 模板语法 - 事件绑定

1、什么是事件

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

2、小程序中常用的事件

3、事件对象的属性列表

4、 target 和 currentTarget 的区别

（1）target 是触发该事件的源头组件，而 currentTarget 则是当前事件所绑定的组件。
（2）举例如下：

<view class="out" bindtap="outHandler">
	<button type="primary">点击button>
view>
1
2
3

点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层 view 的 tap 事件处理函数。
此时，对于外层的 view 来说：
⚫ e.target 指向的是触发事件的源头组件，因此，e.target 是内部的按钮组件。
⚫ e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget 是当前的 view 组件。

5、bindtap 的语法格式

（1）在小程序中，不存在 HTML 中的 onclick 鼠标点击事件，而是通过 tap 事件来响应用户的触摸行为。
① 在页面的 .wxml文件 中通过 bindtap，可以为组件绑定 tap 触摸事件，语法如下：

<button type="primary" bindtap="btnHandler">点击button>
1

② 在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event（一般简写成 e） 来接收：

Page({
	btnHandler(e) {
		// TODO
		console.log(e)
	}
})
1
2
3
4
5
6

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

（1）在 .js文件 通中过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值，示例如下：

Page({
	data: {
		count: 0
	},
	
	// 绑定事件
	btnHandler() {
		this.setData({ count: this.data.count + 1 })
	}
})
1
2
3
4
5
6
7
8
9
10

7、事件传参

（1）小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。例如，下面的代码将不能正常工作：

<button type="primary" bindtap="btnHandler('luca')">点击button>
1

原因：因为小程序会把 bindtap 的属性值，统一当作事件名称来处理，相当于要调用一个名称为 btnHandler('luca') 的事件处理函数。
（2）如果要想传参，可以为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字，示例代码如下：

<button type="primary" bindtap="btnHandler" data-name="luca" data-info="你好">点击button>
1

最终
⚫ name 和 info 各自会被解析为参数的名字
⚫ 字符串 luca 和 info 会被解析为参数的值
（3）在事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值，示例代码如下：

// 页面的js文件

btnHandler(e) {
	// dataset 是一个对象，包含了所有通过 data-* 传过来的参数项
	console.log(e.target.dataset)
	// 通过 dataset 可以访问到具体参数的值
	console.log(e.target.dataset.name)
	console.log(e.target.dataset.info)
}
1
2
3
4
5
6
7
8
9

（4）注意： 为组件提供的 data-* 自定义的参数，其中的 *为参数的名字，要是 * 设置参数名时包含了 大写字母，在 .js文件 中访问具体参数时，此参数名需要全部为 小写的形式，不然读取到的值 会是undefined。
① wxml 文件中：

<button type="primary" bindtap="btnHandler" data-userName="luca">点击button>
1

② js 文件中
此处 data-* 的 * 设置为了 “userName”。错误的读取：e.target.dataset.userName；正确的读取：e.target.dataset.username。
错误的读取方法：

// 页面的js文件
btnHandler(e) {
	// 通过 dataset 可以访问到具体参数的值
	console.log(e.target.dataset.userName)
}
1
2
3
4
5

正确的读取方法：

// 页面的js文件
btnHandler(e) {
	// 通过 dataset 可以访问到具体参数的值
	console.log(e.target.dataset.username)
}
1
2
3
4
5

8、 bindinput 的语法格式

（1）在小程序中，通过 input 事件来响应文本框的输入事件，语法格式如下：
① 在页面的 .wxml文件中，通过 bindinput，可以为文本框绑定输入事件：

<input bindinput="inputHandler">input>
1

② 在页面的 .js 文件中定义事件处理函数：

inputHandler(e) {
	// e.detail.value 是 input 输入框变化后，文本框最新的值
	console.log(e.detail.value)
}
1
2
3
4

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

（1）实现步骤：

• ① 定义数据
• ② 渲染结构
• ③ 绑定 input 事件处理函数

① 定义数据，页面的 .js文件，代码如下：

Page({
	data: {
		username: "luca"
	}
})
1
2
3
4
5

② 渲染结构，页面的 .wxml文件，代码如下：

<input value="{{username}}" bindtap="inputHandler">input>
1

③ 绑定 input 事件处理函数，页面的 .js文件，代码如下：

Page({
	data: {
		username: "luca"
	},

	// input 输入框改变的事件
	inputHandler(e) {
		// 通过 e.detail.value 获取到文本框最新的值
		this.setData({ username: e.detail.value })
	}
})
1
2
3
4
5
6
7
8
9
10
11