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

news2025/3/11 6:20:39

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

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

在组件上通过 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- 方法传递参数时,多个单词由驼峰写法定义时,获取事件数据时需要使用全小写格式;

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2313071.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Java学习】包装类

面向对象系列九 包装类变量 一、装箱 1.实例化包装对象 2.静态缓存池 3.写法 二、拆箱 包装类变量 每个基本数据类型都有对应的基本类型的包装类变量&#xff0c;将基本数据类型通过对应的包装类对象载入着进入到类与对象面向对象体系 一、装箱 Integer.valueOf(int) —…

中国自动化领域零部件研究报告

一、引言 1.1 研究背景与目的 随着科技的飞速发展&#xff0c;自动化技术已成为推动各行业转型升级的关键力量。中国自动化领域零部件行业在近年来取得了显著进展&#xff0c;市场规模持续扩大&#xff0c;技术水平不断提升。在政策支持与市场需求的双重驱动下&#xff0c;中…

MySQL数据集成:高效数据同步与监控

MySQL数据集成案例分享&#xff1a;user-钉钉部门树-名称刷新 在企业信息系统中&#xff0c;数据的高效流动和准确同步是确保业务连续性和决策支持的重要环节。本文将聚焦于一个具体的系统对接集成案例——将MySQL中的数据集成到另一个MySQL数据库中&#xff0c;方案名称为“u…

时序数据库TimescaleDB基本操作示例

好的&#xff01;以下是使用 TimescaleDB 的 Java 示例&#xff08;基于 JDBC&#xff0c;因为 TimescaleDB 是 PostgreSQL 的扩展&#xff0c;官方未提供独立的 Java SDK&#xff09;&#xff1a; 1. 添加依赖&#xff08;Maven&#xff09; <dependency><groupId&g…

【VBA】WPS/PPT设置标题字体

通过VBA&#xff0c;配合左上角的快速访问工具栏&#xff0c;实现自动化调整 选中文本框的 字体位置、大小、颜色。 配合quicker更加便捷 Sub DisableAutoWrapAndFormat()Dim shp As Shape 检查是否选中了一个形状&#xff08;文本框&#xff09;If ActiveWindow.Selection.Typ…

Qt:事件

目录 处理事件 鼠标事件 键盘事件 定时器事件 窗口事件 虽然 Qt 是跨平台的 C 开发框架&#xff0c;Qt 的很多能力其实是操作系统提供的 只不过 Qt 封装了系统的 API 事件 前面学习过信号槽&#xff1a; 用户进行的各种操作&#xff0c;就可能会产生出信号&#xff0c;可以…

3个 Vue Scoped 的核心原理

大家好&#xff0c;我是大澈&#xff01;一个喜欢结交朋友、喜欢编程技术和科技前沿的老程序员&#x1f468;&#x1f3fb;‍&#x1f4bb;&#xff0c;关注我&#xff0c;科技未来或许我能帮到你&#xff01; 先用一句话概括 Vue Scoped 的核心原理&#xff1a;Vue 的 scoped…

物联网IoT系列之MQTT协议基础知识

文章目录 物联网IoT系列之MQTT协议基础知识物联网IoT是什么&#xff1f;什么是MQTT&#xff1f;为什么说MQTT是适用于物联网的协议&#xff1f;MQTT工作原理核心组件核心机制 MQTT工作流程1. 建立连接2. 发布和订阅3. 消息确认4. 断开连接 MQTT工作流程图MQTT在物联网中的应用 …

ubuntu 20.04 C++ 源码编译 cuda版本 opencv4.5.0

前提条件是安装好了cuda和cudnn 点击下载&#xff1a; opencv_contrib4.5.0 opencv 4.5.0 解压重命名后 进入opencv目录&#xff0c;创建build目录 “CUDA_ARCH_BIN ?” 这里要根据显卡查询一下,我的cuda是11&#xff0c;显卡1650&#xff0c;所以是7.5 查询方法1&#xff1…

2025-03-07 学习记录--C/C++-PTA 习题8-5 使用函数实现字符串部分复制

合抱之木&#xff0c;生于毫末&#xff1b;九层之台&#xff0c;起于累土&#xff1b;千里之行&#xff0c;始于足下。&#x1f4aa;&#x1f3fb; 一、题目描述 ⭐️ 二、代码&#xff08;C语言&#xff09;⭐️ #include <stdio.h> #define MAXN 20void strmcpy( char…

江科大51单片机笔记【10】蜂鸣器(上)

一、蜂鸣器 1.原理 蜂鸣器是一种将电信号转换为声音信号的器件&#xff0c;常同来产生设备的按键音、报警音等提示信号蜂鸣器按驱动方式可分为有源蜂鸣器和无源蜂鸣器&#xff08;外观基本一样&#xff09;有源蜂鸣器&#xff1a;内部自带振荡源&#xff0c;将正负极接上直流…

最新版本WebContext构造函数-避坑

import org.thymeleaf.context.IWebContext; import org.thymeleaf.context.WebContext; 当你想把页面信息全部获取出来存到redis缓存中使用时&#xff0c;SpringWebContext在Spring5中报错 SpringWebContext ctx new SpringWebContext(request, response,request.getServlet…

忘记dedecms后台超级管理员账号和密码的解决方案

解决方案&#xff1a; 方案一、数据库修改&#xff1a; 1、前提是您能登录到数据库后台&#xff0c;登录MySQL数据库管理工具&#xff08;如phpMyAdmin&#xff09; 2、打开数据库中的 dede_admin 表&#xff0c;找到管理员记录&#xff0c;将 pwd 字段的值改成 f297a57a5a7…

Kubernetes中的 iptables 规则介绍

#作者&#xff1a;邓伟 文章目录 一、Kubernetes 网络模型概述二、iptables 基础知识三、Kubernetes 中的 iptables 应用四、查看和调试 iptables 规则五、总结 在 Kubernetes 集群中&#xff0c;iptables 是一个核心组件&#xff0c; 用于实现服务发现和网络策略。iptables 通…

Windows 11下Git Bash执行cURL脚本400问题、CMD/PowerShell不能执行多行文本等问题记录及解决方案

问题 在Postman里可成功执行的POST请求&#xff1a; 找到Postman的Code 因为cURL基本上算是行业标准&#xff0c;所以Postman默认选中cURL&#xff0c;支持切换不同的开发语言&#xff1a; 点击上图右上角的复制按钮&#xff0c;得到cURL脚本。 Windows 11家庭版&#xff…

利用LLMs准确预测旋转机械(如轴承)的剩余使用寿命(RUL)

研究背景 研究问题:如何准确预测旋转机械(如轴承)的剩余使用寿命(RUL),这对于设备可靠性和减少工业系统中的意外故障至关重要。研究难点:该问题的研究难点包括:训练和测试阶段数据分布不一致、长期RUL预测的泛化能力有限。相关工作:现有工作主要包括基于模型的方法、数…

记录小白使用 Cursor 开发第一个微信小程序(二):创建项目、编译、预览、发布(250308)

文章目录 记录小白使用 Cursor 开发第一个微信小程序&#xff08;二&#xff09;&#xff1a;创建项目、编译、预览、发布&#xff08;250308&#xff09;一、创建项目1.1 生成提示词1.2 生成代码 二、编译预览2.1 导入项目2.2 编译预览 三、发布3.1 在微信开发者工具进行上传3…

游戏引擎学习第146天

音高变化使得对齐读取变得不可能&#xff0c;我们可以支持循环声音了。 我们今天的目标是完成之前一段时间所做的音频代码。这个项目并不依赖任何引擎或库&#xff0c;而是一个教育项目&#xff0c;目的是展示从头到尾运行一个游戏所需要的全部代码。无论你对什么方面感兴趣&a…

Java 大视界 -- Java 大数据在智能体育赛事运动员表现分析与训练优化中的应用(122)

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…

线性代数之矩阵特征值与特征向量的数值求解方法

文章目录 前言1. 幂迭代法&#xff08;Power Iteration&#xff09;幂法与反幂法求解矩阵特征值幂法求最大特征值编程实现补充说明 2. 逆幂迭代法&#xff08;Inverse Iteration&#xff09;移位反幂法 3. QR 算法&#xff08;QR Algorithm&#xff09;——稠密矩阵理论推导编程…