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

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

news 2026/4/11 5:12:29

在某些情况下，可能需要将整个对象或部分对象嵌入到 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

ESP8266嵌入式MQTT Broker：本地AP+WebSocket轻量实现

1. 项目概述MQTTbroker 是一款专为 ESP8266 设计的轻量级嵌入式 MQTT 消息代理&#xff08;Broker&#xff09;实现&#xff0c;其核心目标是消除云中转依赖&#xff0c;构建本地闭环物联网控制链路。该库并非通用型 MQTT 服务器&#xff08;如 Mosquitto 或 EMQX&#xff09;&…...

编程新知 2026/4/11 4:46:20

WSL + Docker + GPU 安装 video-subtitle-remover 完整文档

&#x1f3af; 一、最终目标 在本机实现&#xff1a; 上传视频 → GPU处理 → 输出去字幕视频&#x1f9f1; 二、最终可用环境&#xff08;你实际跑通的&#xff09; WSL2 NVIDIA 驱动&#xff08;Windows&#xff09; 自装 Docker Engine NVIDIA Container Toolkit Docker GPU…...

编程新知 2026/4/11 4:23:09

Flowable 实战：从零构建 Spring Boot 3 微服务审批系统

1. 为什么选择Flowable构建审批系统&#xff1f; 在开发企业级应用时&#xff0c;审批流程是绕不开的核心功能。传统硬编码的审批逻辑往往面临流程变更困难、状态追踪复杂等问题。我经历过一个报销系统升级项目&#xff0c;仅仅因为增加了副总经理审批环节&#xff0c;就导致整…...

编程新知 2026/4/11 4:01:15

16-bit像素美学实测：Pixel Epic UI对科研专注力提升的用户反馈分析

16-bit像素美学实测&#xff1a;Pixel Epic UI对科研专注力提升的用户反馈分析 1. 产品概述与设计理念 Pixel Epic是一款专为科研工作者设计的智能研究报告辅助工具&#xff0c;其核心创新在于将传统AI工具的工业感界面转化为充满游戏元素的16-bit像素风格。这种独特的设计理…...

编程新知 2026/4/11 3:35:06

LangChain进阶（三）CAMELBabyAGI

Agents智能体如何思考与行动...

编程新知 2026/4/11 3:02:16

别再只靠软件了！揭秘TMS320F280049内部SR触发器实现峰值电流模式的另类玩法

挖掘TMS320F280049隐藏技能&#xff1a;用SR触发器实现高精度电流采样的极限实验 当大多数工程师还在用标准PWM模块处理峰值电流控制时&#xff0c;TI C2000 DSP内部其实藏着一个被严重低估的信号链宝藏。这次我们要解剖的&#xff0c;是TMS320F280049芯片内部那个鲜少被关注的…...

编程新知 2026/4/11 1:01:48

实战部署ECAPA-TDNN说话人识别系统：从架构解析到生产环境优化

实战部署ECAPA-TDNN说话人识别系统&#xff1a;从架构解析到生产环境优化 【免费下载链接】ECAPA-TDNN Unofficial reimplementation of ECAPA-TDNN for speaker recognition (EER0.86 for Vox1_O when train only in Vox2) 项目地址: https://gitcode.com/gh_mirrors/ec/ECA…...

编程新知 2026/4/11 0:45:25

SITS2026首批通过架构案例全披露（含字节/阿里/平安内部PPT精要），仅剩最后23个企业可申请架构对标评估

第一章&#xff1a;SITS2026深度解析&#xff1a;AI原生应用架构设计 2026奇点智能技术大会(https://ml-summit.org) AI原生应用已不再满足于将模型“封装后调用”&#xff0c;而是要求从基础设施、服务编排、状态管理到用户交互的全栈重构。SITS2026&#xff08;Singularity …...

编程新知 2026/4/11 0:02:38

StableSR故障排除大全：常见问题与解决方案汇总

StableSR故障排除大全&#xff1a;常见问题与解决方案汇总 【免费下载链接】StableSR Exploiting Diffusion Prior for Real-World Image Super-Resolution 项目地址: https://gitcode.com/gh_mirrors/st/StableSR StableSR是一款基于扩散先验的图像超分辨率工具&#x…...

编程新知 2026/4/10 23:26:02

金融行情API对接指南：WebSocket实时订阅外汇/期货/数字货币（附代码示例）

引言在量化交易或金融看盘软件开发中&#xff0c;获取低延迟的实时行情&#xff08;Tick级数据&#xff09;是核心环节。传统的HTTP轮询不仅效率低&#xff0c;且容易触发风控。目前主流方案是采用WebSocket协议实现全双工通信&#xff0c;服务端主动推送&#xff0c;极大降低资…...

编程新知 2026/4/10 21:39:50