【微信小程序入门到精通】— 事件绑定的详细解读_微信小程序绑定点击事件(1)
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
| 类型 | 绑定方式 | 事件描述 |
|---|---|---|
| tap | bindtap 或 bind：tap | 手的点击动作（触摸后离开，类似于HTML中的 click 事件） |
| input | bindinput 或 bind：input | 文本框的输入事件 |
| change | bindchange 或 bind：change | 状态改变触发事件 |
tap 事件非常常用，因为在我们微信小程序中，点击这一用户操作是必然发生的，我们绝大部分需要处理的也是点击事件。
三、事件对象属性列表
当我们的事件触发后进行回调时，会收到一个事件对象 event，接下来我们详细介绍一下它的属性。
老规矩我们先通过表格了解一下 event 到底有哪些属性！
| 属性 | 类型 | 说明 |
|---|---|---|
| type | string | 事件类型 |
| timestamp | integer | 页面打开到事件触发所用时间（毫秒） |
| target | object | 触发事件组件的一些属性值集合 |
| currentTarget | object | 当前组件的一些属性值集合 |
| detail | object | 其他的细节信息 |
| touches | array | 触摸事件，当前停留在屏幕中触点信息的数组 |
| changedTouches | array | 触摸事件，当前变化的触点信息的数组 |
- type 属性值的作用就是返回我们事件的类型，如果是我们前面的 tap事件，那么我们 event.type 返回的就是 tap
- timestamp 就是记录事件触发前后的时间间隔
- target 属性值就非常常用了，event.target 就是展示触发事件的属性值
- currentTarget 和上面的 target 形成对比，currentTarget 是对于当前组件的属性值的展示，而 target 则是对于最开始触发事件的属性值展示（后面我们具体例子讲解）
- detail 可以让当前触发的事件的额外信息可以通过 event.detail 获取
- touches 获取当前屏幕上手指的触摸信息
- changedTouches 获取变化的触摸点信息
3.1 target 和 currentTarget 的区别
前面咱们提到 target 的时候，说到这俩属性值有相似但是有实质性区别，那么他们到底有什么不同呢？
- target 指向触发事件的源组件
- currentTarget 则指向当前事件绑定的组件
我们将事件绑定在 view 组件时，内部如果有一个 button 按钮，那么我们点击按钮的时候，也会触发 view 组件的 tap 事件处理函数！所以说当我们将事件绑定在 view 组件上的时候，我们 target 和 currentTarget 在事件触发时指向不同
3.2 bindtap 的用法
接下来我们将通过在 view 组件中触发 button 按钮的形式来感受一下 bindtap 的用法
- 打开 list.wxml，输入如下代码
<view class="text1" bindtap="taphander">
<button type="primary">按钮</button>
</view>
- 打开 list.js ，定义事件处理函数
// pages/list/list.js
Page({
/\*\*
\* 页面的初始数据
\*/
data: {
random:(Math.random()\*10)+2 ,
random2:Math.random().toFixed(3)
},
//定义 text1 的事件处理函数
taphander(event){
console.log(event)
},
/\*\*
\* 生命周期函数--监听页面加载
\*/
onLoad(options) {
},
/\*\*
\* 生命周期函数--监听页面初次渲染完成
\*/
onReady() {
},
/\*\*
\* 生命周期函数--监听页面显示
\*/
onShow() {
},
/\*\*
\* 生命周期函数--监听页面隐藏
\*/
onHide() {
},
/\*\*
\* 生命周期函数--监听页面卸载
\*/
onUnload() {
},
/\*\*
\* 页面相关事件处理函数--监听用户下拉动作
\*/
onPullDownRefresh() {
},
/\*\*
\* 页面上拉触底事件的处理函数
\*/
onReachBottom() {
},
/\*\*
\* 用户点击右上角分享
\*/
onShareAppMessage() {
}
})
上述代码是中我们只要关注 text1 的事件处理函数，就是 data 后面的模块，我们事件处理函数 taphander 的功能就是打印一下事件日志
- 在 调试界面的 console 中查看
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
