当前位置:首页 > JS逆向 > 【微信小程序入门到精通】— 事件绑定的详细解读_微信小程序绑定点击事件(1)

【微信小程序入门到精通】— 事件绑定的详细解读_微信小程序绑定点击事件(1)

一叶知秋2024-05-12 04:57:59JS逆向6

img
img
img

既有适合小白学习的零基础资料,也有适合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 中查看

在这里插入图片描述

img
img
img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!

由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新

需要这份系统化资料的朋友,可以戳这里获取

合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!**

由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新

需要这份系统化资料的朋友,可以戳这里获取

扫描二维码推送至手机访问。

版权声明:本站部分文章来自互联网采集,请查看免责申明

本文链接:https://www.yyzq.team/post/338313.html

分享给朋友:

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。