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

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

news 2026/2/9 22:10:21

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

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2026/2/8 4:37:29

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

编程新知 2025/12/31 8:38:23

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2026/1/31 6:04:01

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2026/1/31 13:42:15

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2026/2/2 0:35:08

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2026/1/20 20:10:03

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/9/24 7:39:50

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2026/2/6 11:54:58

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

编程新知 2026/2/2 11:58:16

uniapp 集成腾讯云 IM 富媒体消息（地理位置/文件）

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...

编程新知 2025/10/25 5:53:05