一、
1.事件
事件是渲染层到逻辑层的通讯方式,通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理
2.小程序中常用的事件
3.事件对象的属性列表
当事件回调触发的时候,会收到一个事件对象event,其属性为:
二、
1.target和currentTarget
target是触发该事件的源头组件,而currentTarget是当前事件所绑定的组件
例如:
点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层view的tap事件处理函数
此时,对于外层的view来说:
e.target指向的是触发事件的源头组件,因此,e.target是内部的按钮组件
e.currentTarget指向的是当前正在触发事件的那个组件,因此,e.currentTarget是当前的view组件
2.bindtap
在小程序中,不存在HTML中的onclick鼠标点击事件,而是通过tap事件来响应用户的触摸行为
(1)通过bindtap,可以为组件绑定tap触摸事件
<button type="primary" bindtap="btnTapHandler">按钮</button>
(2)在页面的.js文件中定义对应的事件处理函数,事件参数通过形参event(一般写为e)来接收
Page({data: {btnTapHandler(e) { //按钮的tap事件处理函数console.log(e) //事件的参数对象e}})
三、
1.在事件处理函数中为data中的数据赋值
通过调用this.setData(data Object)方法,可以给页面data中的数据重新赋值
<!--pages/list/list.wxml-->
<button type="primary" bindtap="CountChange">+1</button>
// pages/list/list.js
Page({data: {count:0},//修改count的值CountChange(){this.setData({count:this.data.count + 1})}})
每按一次+1,控制台的count都会加一
2.事件传参
小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数
<button type="primary" bindtap="btnHandler(123)">事件传参</button>
以上代码不能正常运行
因为小程序会把bindtap的属性值统一当作事件名称来处理,相当于要调用一个名称为btnHandler(123)的事件处理函数
可以为组件提供data-*自定义属性传参,其中*代表的是参数的名字
<!--pages/list/list.wxml-->
<button type="primary" data-info="{{2}}">事件传参</button>
info会被解析为参数的名字,数值2被解析为参数的值
在事件处理函数中,通过event.target.dataset.函数名即可获取到具体参数的值
<!--pages/list/list.wxml-->
<button type="primary" bindTap="btnTap" data-info="{{2}}">+2</button>
// pages/list/list.js
Page({data: {count:0},btnTap(e) {this.setData({count:this.data.count + e.target.dataset.info})}})
如果明确知道自己传的是一个数字的话,建议大家放在Mustache语法里面
3.bindinput的语法格式
在小程序中,通过input事件来响应文本框的输入事件
(1)通过bindinput,可以为文本框绑定输入事件
<!--pages/list/list.wxml-->
<input bindinput="inputHandler"></input>
// pages/list/list.js
Page({data: {count:0},inputHandler(e){//e.detail.value是变化过后,文本框最新的值console.log(e.detail.value)}})
4.实现文本框和data之间的数据同步
实现步骤:
(1)定义数据
(2)渲染结构
(3)美化样式
(4)绑定input事件处理函数