当前位置: 首页 > news >正文

小程序事件系统 —— 33 事件传参 - data-*自定义数据

事件传参:在触发事件时,将一些数据作为参数传递给事件处理函数的过程,就是事件传参;

在微信小程序中,我们经常会在组件上添加一些自定义数据,然后在事件处理函数中获取这些自定义数据,从而完成业务逻辑的开发,这个过程称为小程序的事件传参;

在组件上通过 data-* 定义需要传递的数据,其中 * 是自定义的属性,例如:<view data-id="100" bindtap="handler" />,代码中的 id 就是自定义的属性,属性值 100 是需要传递的数据,然后通过事件对象获取自定义的数据;

下面打开微信开发者工具演示一下事件传参的使用步骤,在演示完后讲解一下相关的注意事项:

  • 在 pges/cate/cate.wxml 文件中添加下面代码:

    <view><button bind:tap="btnHandler" data-id="1" data-name="tom">按钮</button>
    </view>
    

    绑定事件 btnHandler,自定义 id 和 name 数据;

  • 在 pages/cate/cate.js 文件中定义 btnHandle 事件处理函数:

      btnHandler(event){console.log(event)}
    
  • 在 pages/cate/cate.scss 文件中定义一下 view 的样式:

    view {display: flex;height: 300rpx;background-color: skyblue;align-items: center;
    }
    

在页面中点击按钮,在 console 中可以看到打印的事件对象信息,如下:

在这里插入图片描述
打开事件对象,可以看到在 currentTarget 和 target 中都能看到传递的数据信息,如下:

在这里插入图片描述在这里插入图片描述
这时候我们需要了解一下 currentTarget 和 target 的区别是什么:

  • currentTarget:事件绑定者,也就是指哪个组件绑定了当前事件处理函数;
  • target:事件触发者,也就是指哪个组件出发了当前事件处理函数;

在这个例子中,currentTarget 的事件绑定者是 btn 按钮,target 的事件触发者也是 btn 按钮;

接下来看一下 currentTarget 和 target 不是指向同一个组件的情况:

  • 在 pages/cate/cate.wxml 中添加下面代码:
<view bind:tap="parentHandler" data-parentid="1" data-parentname="tom"><button data-id="1" data-name="tom">按钮</button>
</view>
  • 在 pages/cate/cate.js 中添加下面代码:
 parentHandler (event) {console.log(event)}

刷新重新运行,清空 console 区域,点击按钮周围的蓝色区域(注意不要点击按钮),观察 console 打印的事件对象信息,如下:

在这里插入图片描述
可以看到,在打印的事件对象中,currentTarget 获得的数据是 parentid 和 parentname,可以知道当前的事件绑定者是 view,如下:

在这里插入图片描述
同样,target 获取的数据也是 parentid 和 parentname,可以知道当前事件的触发者也是 view,如下:

在这里插入图片描述
下面点击按钮(注意不要点击按钮外的蓝色区域),观察 console 打印的事件数据,可以发现,currentTarget 绑定的数据是 view 对应的自定义数据,如下:

在这里插入图片描述
再看一下 target 的数据,可以看到 target 中绑定的数据是 button 中对应的自定义数据,因为这里是点击按钮触发的事件,所以 target 的数据为 button 中定义的数据,如下:

在这里插入图片描述
接下来讲解一下两个注意事项:

  • 假如事件在传递参数的时候,自定义属性是由多个单词来组成的,单词与单词之间使用中划线(-)来分隔,获取事件对象的数据的时候需要使用驼峰格式,比如上面的 parentid 和 parentname 修改为中划线格式,如下:

    <view bind:tap="parentHandler" data-parent-id="1" data-parent-name="tom"><button data-id="1" data-name="tom">按钮</button>
    </view>
    

    使用中划线命名属性之后,我们在开发者模式中看一下如何获取对应的数据属性,打开 console 模式,点击按钮,在打印的数据中可以看到,对应的属性名变为了驼峰命名写法,如下:

    在这里插入图片描述
    在定义数据的时候,使用的是中划线,在获取数据的时候,使用驼峰格式;

    因此我们需要注意,当使用中划线命名单词的时候,获取事件对象的数据需要使用驼峰格式获取数据;

  • 假如事件在传递参数的时候,自定义参数使用驼峰命名,在获取事件对象的数据的时候,需要使用全小写的格式,如下:

    在这里插入图片描述

简单对上面的内容进行总结:

  • 事件传参使用 data-* 的格式;
  • event.currentTarget 是指事件绑定者,event.target 是指事件触发者;
  • 使用 data- 方法传递参数时,多个单词由中划线-连接时,获取事件数据时需要使用驼峰写法;
  • 使用 data- 方法传递参数时,多个单词由驼峰写法定义时,获取事件数据时需要使用全小写格式;

参考视频:尚硅谷微信小程序开发教程

相关文章:

小程序事件系统 —— 33 事件传参 - data-*自定义数据

事件传参&#xff1a;在触发事件时&#xff0c;将一些数据作为参数传递给事件处理函数的过程&#xff0c;就是事件传参&#xff1b; 在微信小程序中&#xff0c;我们经常会在组件上添加一些自定义数据&#xff0c;然后在事件处理函数中获取这些自定义数据&#xff0c;从而完成…...

深入解析 JavaScript 原型与原型链:从原理到应用

原型和原型链是 JavaScript 中实现对象继承和属性查找的核心机制。为了更深入地理解它们&#xff0c;我们需要从底层原理、实现机制以及实际应用等多个角度进行分析。 1. 原型&#xff08;Prototype&#xff09; 1.1 什么是原型&#xff1f; 每个 JavaScript 对象&#xff08…...

关于AI数据分析可行性的初步评估

一、结论&#xff1a;可在部分环节嵌入&#xff0c;无法直接处理大量数据 1.非本地部署的AI应用处理非机密文件没问题&#xff0c;内部文件要注意数据安全风险。 2.AI&#xff08;指高规格大模型&#xff09;十分适合探索性研究分析&#xff0c;对复杂报告无法全流程执行&…...

回归预测 | Matlab实现GWO-BP-Adaboost基于灰狼算法优化BP神经网络结合Adaboost思想的回归预测

回归预测 | Matlab实现GWO-BP-Adaboost基于灰狼算法优化BP神经网络结合Adaboost思想的回归预测 目录 回归预测 | Matlab实现GWO-BP-Adaboost基于灰狼算法优化BP神经网络结合Adaboost思想的回归预测回归效果基本介绍GWO-BP-Adaboost:基于灰狼算法优化BP神经网络结合Adaboost思想…...

ARM Cortex-M 内存映射详解:如何基于寄存器直接读写 寄存器映射方式编码程序 直接操作硬件寄存器来控制 MCU

ARM Cortex-M 的系统映射空间 ​ 在 STM32 等 ARM Cortex-M 系列 MCU 中&#xff0c;内存地址空间按照 存储功能 进行了严格划分&#xff0c;包括 Flash&#xff08;程序存储&#xff09;、RAM&#xff08;数据存储&#xff09;、外设寄存器&#xff08;GPIO、UART、SPI 等&am…...

深度学习实战车辆目标跟踪与计数

本文采用YOLOv8作为核心算法框架&#xff0c;结合PyQt5构建用户界面&#xff0c;使用Python3进行开发。YOLOv8以其高效的实时检测能力&#xff0c;在多个目标检测任务中展现出卓越性能。本研究针对车辆目标数据集进行训练和优化&#xff0c;该数据集包含丰富的车辆目标图像样本…...

django中视图作用和视图功能 以及用法

在 Django REST Framework(DRF)中,视图(View)是处理 HTTP 请求并返回响应的核心组件。DRF 提供了多种视图类,适用于不同的场景和需求。以下是 DRF 中常见的视图类及其作用、使用方法的详细说明: 一、DRF 视图的分类 DRF 的视图可以分为以下几类: 基于函数的视图(Func…...

【每日学点HarmonyOS Next知识】输入框自动获取焦点、JS桥实现方式、Popup设置全屏蒙版、鼠标事件适配、Web跨域

1、HarmonyOS TextInput或TextArea如何自动获取焦点&#xff1f; 可以使用 focusControl.requestFocus 对需要获取焦点的组件设置焦点&#xff0c;具体可以参考文档&#xff1a; https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attribut…...

【学习思维模型】

学习思维模型 一、理解类模型二、记忆类模型三、解决问题类模型四、结构化学习模型五、效率与习惯类模型六、高阶思维模型七、实践建议八、新增学习思维模型**1. 波利亚问题解决四步法****2. 主动回忆(Active Recall)****3. 鱼骨图(因果图/Ishikawa Diagram)****4. MECE原则…...

MyBatis-Plus分页控件使用及使用过程发现的一个坑

最近维护一个旧项目的时候&#xff0c;出现了一个BUG&#xff0c;经排查后发现是Mybatis-plus分页控件使用的时候需要注意的一个问题&#xff0c;故在本地使用MybatisPlus模拟出现了一下这个问题。 首先&#xff0c;先说一下MyBatis-Plus的使用&#xff1a; 1&#xff09;引入…...

STM32的APB1和APB2的区别

STM32微控制器中的APB1和APB2的区别 STM32微控制器中的APB1和APB2是两种不同的外设总线&#xff0c;主要区别在于时钟速度、连接的外设以及用途。以下是它们的详细对比&#xff1a; 1. 时钟速度 APB1 (Advanced Peripheral Bus 1): 低速总线&#xff0c;时钟频率通常为系统时钟…...

JS一些小知识点

一、|| 运算符 plain this.ctx.body { type: type || 0, // ||在此处用法用于默认值填充&#xff0c;判断是否传参或该值是否存在&#xff0c;如果不存在就使用||后买你的值作为默认值 code: code || 0, msg: msg || SUCCESS, data: data || {}, ...others }; 二、trim() 方…...

手写Tomcat:实现基本功能

首先&#xff0c;Tomcat是一个软件&#xff0c;所有的项目都能在Tomcat上加载运行&#xff0c;Tomcat最核心的就是Servlet集合&#xff0c;本身就是HashMap。Tomcat需要支持Servlet&#xff0c;所以有servlet底层的资源&#xff1a;HttpServlet抽象类、HttpRequest和HttpRespon…...

C#变量与变量作用域详解

一、变量基础 1. ‌声明与初始化‌ 声明语法‌&#xff1a;<数据类型> <变量名>&#xff08;如 int age; string name&#xff09;‌初始化要求‌&#xff1a; 1、 类或结构体中的字段变量&#xff08;全局变量&#xff09;‌无需显式初始化‌&#xff0c;默认值…...

SV学习笔记——数组、队列

一、定宽数组 定宽数组是静态变量&#xff0c;编译时便已经确定其大小&#xff0c;其可以分为压缩定宽数组和非压缩定宽数组:压缩数组是定义在类型后面&#xff0c;名字前面;非压缩数组定义在名字后面。Bit [7:0][3:0] name; bit[7:0] name [3:0]; 1.1定宽数组声明 数组的声…...

API调试工具的无解困境:白名单、动态IP与平台设计问题

引言 你是否曾经在开发中遇到过这样的尴尬情形&#xff1a;你打开了平台的API调试工具&#xff0c;准备一番操作&#xff0c;结果却发现根本无法连接到平台&#xff1f;别急&#xff0c;问题出在调试工具本身。今天我们要吐槽的就是那些神奇的开放平台API调试工具&#xff0c;…...

Git清理本地残留的、但已经在服务器上被删除的分支

要筛选出已经被服务器删除的本地分支&#xff0c;并在本地删除这些分支&#xff0c;可以按照以下步骤进行操作&#xff1a; 步骤 1: 获取远程分支信息&#xff0c;确保本地的远程分支信息是最新的&#xff1a; git fetch -p步骤 2: 列出本地分支和远程分支&#xff1a; git …...

HTTPS实现内容加密的逻辑

加密过程 使用非对称加密&#xff0c;网站生成公钥和私钥浏览器获取到网站公钥&#xff08;通过验证和解析CA证书&#xff09;&#xff0c;随即生成一串字符串&#xff0c;然后使用公钥加密&#xff0c;发送给网站。网站用私钥将加密内容解析&#xff0c;然后使用这串字符串对…...

使用vue3.0+electron搭建桌面应用并打包exe

使用vue3.0electron搭建桌面应用并打包exe_如何使用electron将vue3vite开发完的项目打包成exe应用程序-CSDN博客...

JSAR 基础 1.2.1 基础概念_空间小程序

JSAR 基础 1.2.1 基础概念_空间小程序 空间空间自由度可嵌入空间空间小程序 最新的技术进展表明&#xff0c;官网之前的文档准备废除了&#xff0c;基于xsml的开发将退出历史舞台&#xff0c;three.js和普通web结合的技术将成为主导。所以后续学习请移步three.js学习路径&#…...

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...