在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终端…...
ESP8266嵌入式MQTT Broker:本地AP+WebSocket轻量实现
1. 项目概述MQTTbroker 是一款专为 ESP8266 设计的轻量级嵌入式 MQTT 消息代理(Broker)实现,其核心目标是消除云中转依赖,构建本地闭环物联网控制链路。该库并非通用型 MQTT 服务器(如 Mosquitto 或 EMQX)&…...
WSL + Docker + GPU 安装 video-subtitle-remover 完整文档
🎯 一、最终目标 在本机实现: 上传视频 → GPU处理 → 输出去字幕视频🧱 二、最终可用环境(你实际跑通的) WSL2 NVIDIA 驱动(Windows) 自装 Docker Engine NVIDIA Container Toolkit Docker GPU…...
Flowable 实战:从零构建 Spring Boot 3 微服务审批系统
1. 为什么选择Flowable构建审批系统? 在开发企业级应用时,审批流程是绕不开的核心功能。传统硬编码的审批逻辑往往面临流程变更困难、状态追踪复杂等问题。我经历过一个报销系统升级项目,仅仅因为增加了副总经理审批环节,就导致整…...
16-bit像素美学实测:Pixel Epic UI对科研专注力提升的用户反馈分析
16-bit像素美学实测:Pixel Epic UI对科研专注力提升的用户反馈分析 1. 产品概述与设计理念 Pixel Epic是一款专为科研工作者设计的智能研究报告辅助工具,其核心创新在于将传统AI工具的工业感界面转化为充满游戏元素的16-bit像素风格。这种独特的设计理…...
LangChain进阶(三)CAMELBabyAGI
Agents智能体如何思考与行动...
别再只靠软件了!揭秘TMS320F280049内部SR触发器实现峰值电流模式的另类玩法
挖掘TMS320F280049隐藏技能:用SR触发器实现高精度电流采样的极限实验 当大多数工程师还在用标准PWM模块处理峰值电流控制时,TI C2000 DSP内部其实藏着一个被严重低估的信号链宝藏。这次我们要解剖的,是TMS320F280049芯片内部那个鲜少被关注的…...
实战部署ECAPA-TDNN说话人识别系统:从架构解析到生产环境优化
实战部署ECAPA-TDNN说话人识别系统:从架构解析到生产环境优化 【免费下载链接】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…...
SITS2026首批通过架构案例全披露(含字节/阿里/平安内部PPT精要),仅剩最后23个企业可申请架构对标评估
第一章:SITS2026深度解析:AI原生应用架构设计 2026奇点智能技术大会(https://ml-summit.org) AI原生应用已不再满足于将模型“封装后调用”,而是要求从基础设施、服务编排、状态管理到用户交互的全栈重构。SITS2026(Singularity …...
StableSR故障排除大全:常见问题与解决方案汇总
StableSR故障排除大全:常见问题与解决方案汇总 【免费下载链接】StableSR Exploiting Diffusion Prior for Real-World Image Super-Resolution 项目地址: https://gitcode.com/gh_mirrors/st/StableSR StableSR是一款基于扩散先验的图像超分辨率工具&#x…...
金融行情API对接指南:WebSocket实时订阅外汇/期货/数字货币(附代码示例)
引言在量化交易或金融看盘软件开发中,获取低延迟的实时行情(Tick级数据)是核心环节。传统的HTTP轮询不仅效率低,且容易触发风控。目前主流方案是采用WebSocket协议实现全双工通信,服务端主动推送,极大降低资…...
