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

在js渲染的dom中的事件中传递对象

news 2025/12/15 13:41:57

在某些情况下，可能需要将整个对象或部分对象嵌入到 HTML 元素的属性中，可以将对象数据序列化为 JSON 字符串，存储在 data-* 自定义属性中。这样可以在事件中取出并解析对象数据：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>嵌入 JSON 数据</title>
</head>
<body><div id="container"></div><script>// 对象数组const users = [{ id: 1, name: 'Alice', age: 25, job: 'Engineer' },{ id: 2, name: 'Bob', age: 30, job: 'Designer' },{ id: 3, name: 'Charlie', age: 35, job: 'Teacher' }];// 获取容器const container = document.getElementById('container');// 使用模板字符串拼接对象属性并嵌入 JSON 数据let html = '';users.forEach(user => {html += `<div class="user-card"><h2>${user.name}</h2><p>Age: ${user.age}</p><p>Job: ${user.job}</p><button data-user='${JSON.stringify(user)}'>查看详情</button></div>`;});// 将拼接的 HTML 插入到页面中container.innerHTML = html;// 事件委托绑定点击事件container.addEventListener('click', function(event) {if (event.target && event.target.tagName === 'BUTTON') {const userData = event.target.getAttribute('data-user');const user = JSON.parse(userData); // 解析 JSON 字符串为对象console.log(user);console.log(`用户详情: ${user.name}, 年龄: ${user.age}, 职业: ${user.job}`);}});</script>
</body>
</html>

打印结果：

说明：

  1. 嵌入 JSON 数据：在按钮的 data-user 属性中嵌入了整个用户对象，使用 JSON.stringify() 将对象转化为字符串。
  2. 提取 JSON 数据：在点击事件中，通过 getAttribute 获取 data-user 属性的值，并使用 JSON.parse() 将其转化回对象形式使用。

相关文章：

在js渲染的dom中的事件中传递对象

在某些情况下&#xff0c;可能需要将整个对象或部分对象嵌入到 HTML 元素的属性中&#xff0c;可以将对象数据序列化为 JSON 字符串&#xff0c;存储在 data-* 自定义属性中。这样可以在事件中取出并解析对象数据&#xff1a; <!DOCTYPE html> <html lang"en&qu…...

编程日记 2024/9/5 19:38:09

服务器加速器如何应对大规模并行计算需求

服务器加速器&#xff0c;如GPU(图形处理单元)、FPGA(现场可编程门阵列)和TPU(张量处理单元)&#xff0c;在大规模并行计算需求中发挥着重要作用。它们通过提供高效的并行处理能力&#xff0c;大幅提升了计算性能&#xff0c;满足了许多领域对大规模并行计算的需求。下面详细介…...

编程日记 2024/9/5 19:37:08

C++/Qt 多媒体（续四）

一、前言 前边讲述到了Qt的两项独特的模块编程支持的另一项内容——多媒体编程，上篇文章具体讲述的包括采集和播放原始音频相关类的概述，而本章开始主要概述多媒体编程实现的功能中的最后两项：播放视频文件和通过摄像头拍照和录像。 对于上篇内容的示例全部代码，可…...

编程日记 2024/9/5 19:36:05

怎样把flv转换成mp4格式？8种可以推荐的视频转换方法

怎样把flv转换成mp4格式&#xff1f;MP4格式因其广泛的兼容性&#xff0c;几乎可以在所有设备和媒体播放器上顺畅播放&#xff0c;这极大地方便了用户的观看体验。与flv文件相比&#xff0c;MP4通常能更有效地压缩视频文件&#xff0c;既能保持较高的画质&#xff0c;又能显著减…...

编程日记 2024/9/5 19:35:03

【2024数学建模国赛赛题解析已出】原创免费分享

2024数模国赛赛题已正式发布 数模加油站初步分析评估了此次竞赛题目&#xff1a; A题&#xff1a;偏数学仿真建模&#xff0c;难度偏难&#xff0c;适合数学专业背景的同学 B题&#xff1a;评价决策类&#xff0c;自由度大&#xff0c;容易水&#xff0c;适合基础不太好的同…...

编程日记 2024/9/5 19:33:01

Windows安装使用Docker

配置Dorker环境 启用或关闭windows功能 安装wsl 以管理员身份打开windows PowerShell&#xff0c;安装相关配置 下载docker应用程序 Releases tech-shrimp/docker_installer (github.com) 安装Docker 指定安装位置 默认双击程序就开始安装了&#xff0c;要安装在指定位置…...

编程日记 2024/9/5 19:32:00

【wsl2】从C盘迁移到G盘

参考大神 C盘的ubuntu22.04 非常大&#xff0c;高达30g 迁移后就只有几百M了&#xff1a; 右键有一个move没有敢尝试 迁移过程 Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved.Install the latest PowerShell for new features and improveme…...

编程日记 2024/9/5 19:30:59

低代码技术新趋势——逆向工程

低代码的下一个趋势&#xff0c;应该是“逆向工程”&#xff0c;用户可以通过 可视化界面&#xff0c;逆向输出全栈工程代码。而标准的工程代码同样可以编译为支持可视化分析、编辑、调整的“无代码”程序。前一个是解释性语言向编译性语言的逆向工程。后者则是一个理论实践应用…...

编程日记 2024/9/5 19:27:56

HTTP 二、进阶

四、安全 1、TLS是什么 &#xff08;1&#xff09;为什么要有HTTPS ​ 简单的回答是“因为 HTTP 不安全”。由于 HTTP 天生“明文”的特点&#xff0c;整个传输过程完全透明&#xff0c;任何人都能够在链路中截获、修改或者伪造请求 / 响应报文&#xff0c;数据不具有可…...

编程日记 2024/9/5 19:26:55

【Hot100】LeetCode—35. 搜索插入位置

目录 1- 思路二分 2- 实现⭐35. 搜索插入位置——题解思路 3- ACM 实现 题目连接&#xff1a;35. 搜索插入位置 1- 思路 二分 二分左区间的三种情况。由于目标值不一定在数组中&#xff0c;因此二分的过程中有三种情况判断 2- 实现 ⭐35. 搜索插入位置——题解思路 class So…...

编程日记 2024/9/5 19:25:54

001集——CAD—C#二次开发入门——开发环境基本设置

CAD C#二次开发首先需要搭建一个舒服的开发环境&#xff0c;软件安装后&#xff0c;需要修改相关设置。本文为保姆级入门搭建开发环境教程&#xff0c;默认已成功安装vs和cad 。 第一步&#xff1a;创建类库 第二步&#xff1a;进行相关设置&#xff0c;如图&#xff1a; 下一…...

编程日记 2024/9/5 19:24:53

Java类和对象——快速自动生成带参数的结构

1.鼠标点击右键或者&#xff08;使用快捷按键&#xff1a;AltInsert&#xff09; 2.选着generate 3.选择想要执行的指令 其中Constructor---构造方法&#xff08;声明了private属性然后直接使用即可&#xff09;&#xff0c;生成带参数的结构 1&#xff1a;不带参数的结构&…...

编程日记 2024/9/5 19:22:51

Python操作数据库的ORM框架SQLAlchemy快速入门教程

连接内存版SQLIte from sqlalchemy import create_engineengine create_engine(sqlite:///:memory:) print(engine)连接文件版SQLite from sqlalchemy import create_engineengine create_engine(sqlite:///sqlite3.db) print(engine)连接MySQL数据库 from sqlalchemy imp…...

编程日记 2024/9/5 19:21:50

提交MR这个词儿您知道是什么意思吗？

作为测试的同学&#xff0c;是不是经常会听研发同学说提交MR呢&#xff1f;那么究竟什么是提交MR呢&#xff1f;在这篇文章中会告诉大家&#xff01; 在Git中&#xff0c;提交MR&#xff08;Merge Request&#xff0c;合并请求&#xff09;是在进行协作开发的一种常见方式&…...

编程日记 2024/9/5 19:17:46

Linux sentinel写法

在linux驱动里我们经常能看到类似下面的写法&#xff1a; static const struct of_device_id asensm6_of_match[] {{ .compatible DRIVER_COMPATIBLE },{ /* sentinel */ }, };static const struct of_device_id rockchip_pinctrl_dt_match[] {{ .compatible "rockch…...

编程日记 2024/9/5 19:15:45

顶级域名服务器 - TLD服务器

TLD服务器&#xff08;顶级域名服务器&#xff09;是负责管理互联网域名系统&#xff08;DNS&#xff09;中所有顶级域名&#xff08;Top-Level Domains, TLDs&#xff09;的DNS记录的服务器。顶级域名是域名层级结构中的最高级别&#xff0c;位于域名的最右侧&#xff0c;例如…...

编程日记 2024/9/5 19:13:43

【LeetCode】01.两数之和

题目要求 做题链接&#xff1a;1.两数之和 解题思路 我们这道题是在nums数组中找到两个两个数使得他们的和为target&#xff0c;最简单的方法就是暴力枚举一遍即可&#xff0c;时间复杂度为O&#xff08;N&#xff09;&#xff0c;空间复杂度为O&#xff08;1&#xff09;。…...

编程日记 2024/9/5 19:12:42

便宜好用的云手机盘点

云手机作为一种新型远程计算服务&#xff0c;凭借其便利性、高效性和可扩展性&#xff0c;迅速成为了用户的热门选择。然而&#xff0c;面对市场上众多的云手机品牌&#xff0c;如何选择一款性价比高且体验良好的云手机&#xff1f;本文将为您盘点几款便宜好用的云手机产品。 雷…...

编程日记 2024/9/5 19:11:41

pdf怎么压缩小一些？推荐的几种PDF压缩方法

pdf怎么压缩小一些&#xff1f;在工作中&#xff0c;我们经常处理PDF文件。大文件不仅存储麻烦&#xff0c;还会拖慢传输速度。因此&#xff0c;我们通常希望将这些文件压缩成更小的尺寸。压缩后的文件更便于分享和管理&#xff0c;适用于云存储、社交媒体或其他在线平台&#…...

编程日记 2024/9/5 19:10:40

Linux终端简单配置(Vim、oh-my-zsh和Terminator)

文章目录 0. 概述1. 完整Vim配置2. Vim配置方案解释2.1 状态行与配色方案2.2 文件管理与缓存设置2.3 搜索与导航优化2.4 缩进与格式化设置2.5 粘贴模式快捷切换2.6 文件编码与格式2.7 性能优化 3. 安装 Oh My Zsh 及配置3.1 安装 Oh My Zsh3.2 Oh My Zsh 配置 3. Terminator终端…...

编程日记 2024/9/5 19:09:39

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2025/12/13 23:14:16

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/12/4 19:00:05

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

编程新知 2025/12/9 12:23:34

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

编程新知 2025/12/15 1:34:44

【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

编程新知 2025/12/12 18:28:59

面试高频问题

文章目录 &#x1f680; 消息队列核心技术揭秘&#xff1a;从入门到秒杀面试官1️⃣ Kafka为何能"吞云吐雾"&#xff1f;性能背后的秘密1.1 顺序写入与零拷贝&#xff1a;性能的双引擎1.2 分区并行&#xff1a;数据的"八车道高速公路"1.3 页缓存与批量处理…...

编程新知 2025/11/17 0:00:05

ui框架-文件列表展示

ui框架-文件列表展示 介绍 UI框架的文件列表展示组件&#xff0c;可以展示文件夹&#xff0c;支持列表展示和图标展示模式。组件提供了丰富的功能和可配置选项&#xff0c;适用于文件管理、文件上传等场景。 功能特性 支持列表模式和网格模式的切换展示支持文件和文件夹的层…...

编程新知 2025/12/15 1:46:40

负载均衡器》》LVS、Nginx、HAproxy 区别

虚拟主机 先4&#xff0c;后7...

编程新知 2025/12/10 6:14:22

基于谷歌ADK的 智能产品推荐系统(2): 模块功能详解

在我的上一篇博客&#xff1a;基于谷歌ADK的 智能产品推荐系统(1): 功能简介-CSDN博客 中我们介绍了个性化购物 Agent 项目&#xff0c;该项目展示了一个强大的框架&#xff0c;旨在模拟和实现在线购物环境中的智能导购。它不仅仅是一个简单的聊天机器人&#xff0c;更是一个集…...

编程新知 2025/12/14 11:58:30