在js渲染的dom中的事件中传递对象
在某些情况下，可能需要将整个对象或部分对象嵌入到 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>
打印结果：
说明：
- 嵌入 JSON 数据：在按钮的
data-user属性中嵌入了整个用户对象，使用JSON.stringify()将对象转化为字符串。 - 提取 JSON 数据：在点击事件中，通过
getAttribute获取data-user属性的值，并使用JSON.parse()将其转化回对象形式使用。
相关文章：
在js渲染的dom中的事件中传递对象
在某些情况下，可能需要将整个对象或部分对象嵌入到 HTML 元素的属性中，可以将对象数据序列化为 JSON 字符串，存储在 data-* 自定义属性中。这样可以在事件中取出并解析对象数据： <!DOCTYPE html> <html lang"en&qu…...
服务器加速器如何应对大规模并行计算需求
服务器加速器，如GPU(图形处理单元)、FPGA(现场可编程门阵列)和TPU(张量处理单元)，在大规模并行计算需求中发挥着重要作用。它们通过提供高效的并行处理能力，大幅提升了计算性能，满足了许多领域对大规模并行计算的需求。下面详细介…...
C++/Qt 多媒体（续四）
一、前言 前边讲述到了Qt的两项独特的模块编程支持的另一项内容——多媒体编程，上篇文章具体讲述的包括采集和播放原始音频相关类的概述，而本章开始主要概述多媒体编程实现的功能中的最后两项：播放视频文件和通过摄像头拍照和录像。 对于上篇内容的示例全部代码，可…...
怎样把flv转换成mp4格式？8种可以推荐的视频转换方法
怎样把flv转换成mp4格式？MP4格式因其广泛的兼容性，几乎可以在所有设备和媒体播放器上顺畅播放，这极大地方便了用户的观看体验。与flv文件相比，MP4通常能更有效地压缩视频文件，既能保持较高的画质，又能显著减…...
【2024数学建模国赛赛题解析已出】原创免费分享
2024数模国赛赛题已正式发布 数模加油站初步分析评估了此次竞赛题目： A题：偏数学仿真建模，难度偏难，适合数学专业背景的同学 B题：评价决策类，自由度大，容易水，适合基础不太好的同…...
Windows安装使用Docker
配置Dorker环境 启用或关闭windows功能 安装wsl 以管理员身份打开windows PowerShell，安装相关配置 下载docker应用程序 Releases tech-shrimp/docker_installer (github.com) 安装Docker 指定安装位置 默认双击程序就开始安装了，要安装在指定位置…...
【wsl2】从C盘迁移到G盘
参考大神 C盘的ubuntu22.04 非常大，高达30g 迁移后就只有几百M了： 右键有一个move没有敢尝试 迁移过程 Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved.Install the latest PowerShell for new features and improveme…...
低代码技术新趋势——逆向工程
低代码的下一个趋势，应该是“逆向工程”，用户可以通过 可视化界面，逆向输出全栈工程代码。而标准的工程代码同样可以编译为支持可视化分析、编辑、调整的“无代码”程序。前一个是解释性语言向编译性语言的逆向工程。后者则是一个理论实践应用…...
HTTP 二、进阶
四、安全 1、TLS是什么 （1）为什么要有HTTPS 简单的回答是“因为 HTTP 不安全”。由于 HTTP 天生“明文”的特点，整个传输过程完全透明，任何人都能够在链路中截获、修改或者伪造请求 / 响应报文，数据不具有可…...
【Hot100】LeetCode—35. 搜索插入位置
目录 1- 思路二分 2- 实现⭐35. 搜索插入位置——题解思路 3- ACM 实现 题目连接：35. 搜索插入位置 1- 思路 二分 二分左区间的三种情况。由于目标值不一定在数组中，因此二分的过程中有三种情况判断 2- 实现 ⭐35. 搜索插入位置——题解思路 class So…...
001集——CAD—C#二次开发入门——开发环境基本设置
CAD C#二次开发首先需要搭建一个舒服的开发环境，软件安装后，需要修改相关设置。本文为保姆级入门搭建开发环境教程，默认已成功安装vs和cad 。 第一步：创建类库 第二步：进行相关设置，如图： 下一…...
Java类和对象——快速自动生成带参数的结构
1.鼠标点击右键或者（使用快捷按键：AltInsert） 2.选着generate 3.选择想要执行的指令 其中Constructor---构造方法（声明了private属性然后直接使用即可），生成带参数的结构 1：不带参数的结构&…...
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…...
提交MR这个词儿您知道是什么意思吗？
作为测试的同学，是不是经常会听研发同学说提交MR呢？那么究竟什么是提交MR呢？在这篇文章中会告诉大家！ 在Git中，提交MR（Merge Request，合并请求）是在进行协作开发的一种常见方式&…...
Linux sentinel写法
在linux驱动里我们经常能看到类似下面的写法： 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…...
顶级域名服务器 - TLD服务器
TLD服务器（顶级域名服务器）是负责管理互联网域名系统（DNS）中所有顶级域名（Top-Level Domains, TLDs）的DNS记录的服务器。顶级域名是域名层级结构中的最高级别，位于域名的最右侧，例如…...
【LeetCode】01.两数之和
题目要求 做题链接：1.两数之和 解题思路 我们这道题是在nums数组中找到两个两个数使得他们的和为target，最简单的方法就是暴力枚举一遍即可，时间复杂度为O（N），空间复杂度为O（1）。…...
便宜好用的云手机盘点
云手机作为一种新型远程计算服务，凭借其便利性、高效性和可扩展性，迅速成为了用户的热门选择。然而，面对市场上众多的云手机品牌，如何选择一款性价比高且体验良好的云手机？本文将为您盘点几款便宜好用的云手机产品。 雷…...
pdf怎么压缩小一些？推荐的几种PDF压缩方法
pdf怎么压缩小一些？在工作中，我们经常处理PDF文件。大文件不仅存储麻烦，还会拖慢传输速度。因此，我们通常希望将这些文件压缩成更小的尺寸。压缩后的文件更便于分享和管理，适用于云存储、社交媒体或其他在线平台&#…...
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终端…...
未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？
编辑：陈萍萍的公主一点人工一点智能 未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战，在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞！！！ 抽象 现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增：通道注意力模块（SE模块） class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
智能在线客服平台：数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展，消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁，不仅优化了客户体验，还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用，并…...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索（基于物理空间 广播范围）2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...
Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析
Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问（基础概念问题） 1. 请解释Spring框架的核心容器是什么？它在Spring中起到什么作用？ Spring框架的核心容器是IoC容器&#…...
LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》
这段 Python 代码是一个完整的 知识库数据库操作模块，用于对本地知识库系统中的知识库进行增删改查（CRUD）操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 📘 一、整体功能概述 该模块…...
基于Java+VUE+MariaDB实现（Web）仿小米商城
仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意：运行前…...
aardio 自动识别验证码输入
技术尝试 上周在发学习日志时有网友提议“在网页上识别验证码”，于是尝试整合图像识别与网页自动化技术，完成了这套模拟登录流程。核心思路是：截图验证码→OCR识别→自动填充表单→提交并验证结果。 代码在这里 import soImage; import we…...
负载均衡器》》LVS、Nginx、HAproxy 区别
虚拟主机 先4，后7...