知识点1：什么是事件
- 事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。
知识点2：小程序中常用的事件
| 类型 | 绑定方式 | 事件描述 |
| tap | bindtap或bind:tap | 手指触摸后马上离开，类似于 HTML中的click 事件 |
| input | bindinput 或 bind:input | 文本框的输入事件 |
| change | bindchange 或 bind:change | 状态改变时触发 |
知识点3：事件对象的属性列表
- 当事件回调触发的时候，会收到一个事件对象event，它的详细属性列表如下：
| 属性 | 类型 | |
| type | String | 事件类型 |
| timeStamp | Integer | 页面打开到触发事件所经过的毫秒数 |
| target | Object | 触发事件的组件的一些属性值集合 |
| currentTarget | Object | 当前组件的一些属性值集合 |
| detail | Object | 额外的信息 |
| touches | Array | 触摸事件，当前停留在屏幕中的触摸点信息的数组 |
| changedTouches | Array | 触摸事件，当前变化的触摸点信息的数组 |
知识点4：target和currentTarget的区别
- target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件。
<button
bind:tap="targetClick"
type="primary"
plain="true"
id="123"
>target按钮</button>Page({
targetClick(event){
console.log(event)
}
}){type: "tap", timeStamp: 2827, target: {…}, currentTarget: {…}, mark: {…}, …}
changedTouches: [{…}]
currentTarget: {id: "123", offsetLeft: 0, offsetTop: 0, dataset: {…}}
detail: {x: 165.15625, y: 35.328125}
mark: {}
mut: false
target: {id: "123", offsetLeft: 0, offsetTop: 0, dataset: {…}}
timeStamp: 2827
touches: [{…}]
type: "tap"
__evName: "tap"
_allowWriteOnly: true
_relatedInfo: {anchorTargetText: "target按钮", anchorRelatedText: "", anchorTapTime: 1737007035902}
_requireActive: true
_userTap: true
__proto__: Object
<view bind:tap="targetClick" id="456" >
<button
type="primary"
id="123"
>target按钮</button>
</view>Page({
targetClick(event){
console.log(event)
}
}){type: "tap", timeStamp: 4896, target: {…}, currentTarget: {…}, mark: {…}, …}
changedTouches: [{…}]
currentTarget: {id: "456", offsetLeft: 0, offsetTop: 0, dataset: {…}}
detail: {x: 97.828125, y: 60.65625}
mark: {}
mut: false
target: {id: "123", offsetLeft: 0, offsetTop: 25, dataset: {…}}
timeStamp: 4896
touches: [{…}]
type: "tap"
__evName: "tap"
_allowWriteOnly: true
_relatedInfo: {anchorTargetText: "target按钮", anchorRelatedText: "", anchorTapTime: 1737007515471}
_requireActive: true
_userTap: true
__proto__: Object- 点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view 的tap 事件处理函数。
- target 指向的是触发事件的源头组件，因此，target是内部的按钮组件。（事件的触发者）
- currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget 是当前的 view 组件。（事件的响应者）
知识点5：bindtap 语法格式
- 在小程序中，不存在HTML中的onClick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。
<!-- 定义 -->
<button type="primary" bindtap="btnTapHandler">登录</button>Page({
//bindtap的实现
btnTapHandler(e){
console.log(e)
}
})知识点6：在事件处理函数中为data中的数据赋值
- 通过调用this.setData(dataObject)方法进行赋值。
<!-- 定义 -->
<button type="primary" bindtap="changeCountHandler">当前计数：{{countNum}}</button>Page({
data:{
countNum:0
},
//target 实现
targetClick(event){
console.log(event)
},
//bindtap 实现
btnTapHandler(e){
console.log(e)
},
//data 赋值
changeCountHandler(e){
this.setData({
countNum:this.data.countNum+1
})
}
})知识点7：事件传参
- 可以为组件提供data-*自定义属性传参，其中*代表的是参数的名字。
- 通过event中解析出传递的参数。
<!-- 如果传递数字需要用{{}}包括，否则默认为字符串 -->
<button type="primary" bindtap="eventHandler" data-name="Jeck" data-age="{{18}}">事件传参</button> //data 事件传参
eventHandler(e){
console.log(e.target.dataset.name);
}知识点8：bindinput的语法格式
- 在小程序中，通过input事件来响应文本框的输入事件。
<view>------------------bindinput--------------------</view>
<input bind:tap="inputHandler" placeholder="请输入"></input> //input 事件
inputHandler(e){
console.log(e)
}
