Advertisement

学习微信小程序：事件绑定指南 | 点击事件（第2版）

阅读量：
img
img

网上学习资料浩如烟海，在知识体系不完善的情况下，在遇到技术难题时往往停留在表面认识层面，并缺乏深入探究的精神，则难以实现真正的技术进步

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

一个人大概能走得挺快吧？但如果是一群人在一起的话，则能走得更远一些呢！无论是已经在这个领域摸爬滚打的老鸟还是刚开始对这个领域感兴趣的新人们，都欢迎来到我们的圈子（这里是技术交流群吧？）：里面有学习资源分享、职场吐槽的地方还有很多大厂内推的机会哦！还有面试辅导之类的服务。

目录
  • 前言

    • 第一部分 引言

    • 第二部分 常见事件类型介绍

    • 第三部分 事件对象属性详细解析

      • 3.1 target对象与currentTarget对象的区别
        • 3.2 bindtap功能的具体应用

    • 总结

前言

当下一个热门的趋势是使用微信小程序时，
我们应该如何系统地进行学习与实践操作呢？
为此，
我特别开设了这个学习专栏，
并在个人的学习过程中同步分享相关内容。

这篇文章主要探讨的是事件绑定问题。这也是我们小程序最为关键的交互环节。本文将深入解析这一过程及其背后的技术原理。通过本文的详细阐述与深入分析，请您耐心阅读之后定能掌握其中精髓所在！

如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！

一、事件绑定导论

通讯方式上讲, 事件是渲染层与逻辑层面之间的一种信息传递途径; 利用这一机制, 能够实现从界面操作向逻辑层面的数据反馈.

过程如下图所示：

在这里插入图片描述

其基本过程就是在 .wxml 里面设置事件，然后在 .js 里面构建处理函数。

二、常用事件

大家应该都很关心我们在日常使用微信小程序时涉及哪些事件呢？那么接下来我会详细说明。

类型 绑定方式 事件描述
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 时，
我们提到了这两个属性值表面上看似相似但实质上存在显著差异。
那么它们之间究竟存在哪些本质区别呢？

  • component 指向触发事件的起始组件
    • currentComponent 则指向相关事件的目标组件

我们把事件绑定到view组件上，并且观察到当我们在该组件内设置一个button按钮后的情况。当我们对这个button进行点击操作时（trigger operation），这会激活view组件的tap event handler function！因此，在将event绑定到view组件上时，在event触发的过程中（trigger process），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)
      },
![img]()
![img]()
    
    **网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。** **[需要这份系统化资料的朋友，可以戳这里获取]()** **一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
    
    尝辄止，不再深入研究，那么很难做到真正的技术提升。** **[需要这份系统化资料的朋友，可以戳这里获取]()** **一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

全部评论 (0)

还没有任何评论哟~

相关文章推荐